How to run a React App on AWS Cloud9 from Scratch

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 maybe 2 minutes 😀

Why?

Due to misleading messages in the terminal.

And to my relief, I am not alone.

I have seen numerous questions in various online forums like Stackoverflow and others on this same topic. People are facing problems in previewing their React app locally in the IDE browser and in the Chrome browser.

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

Don’t want to miss any posts from us? join us on our Facebook group, and follow us on Facebook, Twitter, LinkedIn, and Instagram. You can also subscribe to our newsletter below to not miss any updates from us.

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: Log in 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.

This will lead you to the Cloud9 dashboard like below.

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

Step 2: Create a new Cloud9 environment

To Create a Cloud9 environment, Click Create Environment

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

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

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

Note: Always double-check on instance type because you will be charged as per that. For demo purposes, 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

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 the 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 by default mostly)

Create a new react app–

npx create-react-app app-name

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.

Step 4: Navigate into your app and run it

Navigate to your app and run the npm server

Navigate to created app directory-

cd my-app

Start NPM server-

 npm start

Step 5: Preview your running React application

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

Warning :

This is where the problem starts. It tricks you to preview your app on the above two URLs. But no matter, how hard you try, none of the above URLs 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

Voila!!!

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

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

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

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 the Cloud9 browser as well as the normal Chrome browser.

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

Thanks for reading this, Feel free to subscribe below 🙂

Enjoyed the content?

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 –

• Follow Us On
  • Facebook
  • Twitter
  •  LinkedIn
  •  Instagram
• Share this post with your friends

Suggested Read:

• Understand IAM PassRole to Secure your AWS Infrastructure
• How to Create S3 Bucket using CloudFomation
• AWS S3 Storage Classes: Everything You Need to Know
• AWS SQS Standard vs FIFO Queue
• How to Create S3 Bucket Policy using CloudFomation
• Provision ACM certificate using CloudFormation
• Create SSM Parameter using CloudFormation