How to run a React App on AWS Cloud9 from Scratch

How to run a React App on AWS Cloud9 from Scrach
Sharing is Caring:

In this post, I will help you create and run a react app on AWS Cloud9 from scratch.

You might say, Hey it’s very simple !!!

Well, If you have done it before, It is simple indeed.

But trust me, I struggled for hours to actually preview my newly create react app which I created in may be 2 minutes 😀

Why?

Due to misleading messages in the terminal.

And to my relief, I am not alone.

I have seen numerous question in various online forums like stackoverflow and others on this same topic. People are facing problem in previewing their react app locally in IDE browser and in chrome browser.

So, I decided to cover it for you and guide you in a step by step manner.

Steps to run a React App on AWS Cloud9 from Scratch

We will do it in 5 simple steps.

  1. Login to AWS Management Console and open Cloud9
  2. Create a new Cloud9 environment
  3. Create a new React App
  4. Navigate into your app and run it
  5. Preview your running react application

Step 1: Login to AWS Management Console and open Cloud9

Login to AWS Management Console and open Cloud9 service.

You can either go to Services -> Developer Tools -> Cloud9

or type cloud9 in the search bar and hit enter. Once you see Cloud9 option click on that.

cloud9 env

This will lead you to Cloud9 dashboard like below.

Create Cloud9 Environment

Note: Please note that your dashboard may look different and list all your existing environment if you have already worked with Cloud9 in the specific region

Step 2: Create a new Cloud9 environment

To Create Cloud9 environment , Click Create Environment

Fill up Name and Description like below and click on Next step

Create an App in Cloud9 environemnt from scratch 3

After clicking on Next step, you will get to select environment setting.

I like to keep the settings to default as you can see in below snapshot. If you need, you as change this setting as per your requirement.

cloud9 env 4
cloud environment 5

Note: Always double check on instance type because you will be charged as per that. For demo purpose I use t2.micro (1 GiB RAM + 1 vCPU) which is Free-tier eligible and ideal for educational users and exploration.

Click on Next step, Review the setting and Click on Create environment

Cloud review

It will take some time for your environment to be created. Once done, move to step 3 to create a react app.

Step 3: Create a new React App

After your environment is created, navigate to a terminal and type below commands

Tip: You can open a terminal by clicking on Windows -> New Terminal (Although in a newly created environment you will get an open terminal be default mostly)

Create new react app

npx create-react-app app-name
Create an App in Cloud9 environemnt from scratch 6

It will take some time to create a new react app.

After your app is created, you will see something like below in your terminal.

Successful react app creation 7

Step 4: Navigate into your app and run it

Navigate to your app and run npm server

Navigate to created app directory-

cd my-app
navigate to the created app directory 8

Start NPM server-

 npm start

Step 5: Preview your running react application

After you type npm start and hit enter, npm server is started and you are provided with a set of instruction to preview your application like below.

run a React App on AWS Cloud9

Warning :

This is where problem starts. It tricks you to preview your app on above two URL. But no matter, how hard you try, none of the above URL will work.

Then, how to preview your running react application?

Worry not, I am here to help you 🙂

Click on Preview on the top menu bar and then click on Preview Running Application

Preview running react app in cloud9 11

Voila!!!

You can see your hello world/sample react application running in cloud9 browser !!!

run a React App on AWS Cloud9 final

Let’s go one more step and view our running application in normal browser.

Click on the expand icon right next to Browser in the above screenshot, and here you go.

run a React App on AWS Cloud9 one more

Develop your app further and Enjoy this normal chrome browser view while testing.

Conclusion

In this article we created a Cloud9 environment. After that we created a react app and tested it locally.

Finally, we previewed our application in Cloud9 browser as well as normal chrome browser.

Suggested Read: Automated React App Deployment from CodeCommit to AWS S3 using CodePipeline

Thanks for reading till here, Feel free to subscribe below 🙂

Enjoyed the content?

Subscribe to our newsletter below to get awesome AWS learning materials delivered straight to your inbox.

Subscribe to our newsletter below to get awesome AWS learning materials delivered straight to your inbox.

I hope you enjoyed this tutorial. If you have a question, feel free to drop in comment. I will be more then happy to answer your query.

Meanwhile you can also –

Suggested Read:

Sharing is Caring:

Leave a Reply

Your email address will not be published. Required fields are marked *