Deploying a React app with Serverless Studio

— Written by Jake Verbaten

AWS has a lot of services — each solving a specific problem. For example, storage, content delivery, certificate management, DNS, etc. You can build literally any modern web application with these services.

Understanding all these services and how to put them together so that they don't incur unexpected costs or create security concerns is a big investment.

In this demo, we see how Serverless Studio ties these services together for you in an effective and transparent way, giving you access to the underlying platform if you need it.

Today we're going to make a static website using Create React App. Under the hood, Serverless Studio will create a S3 bucket, configure permissions and settings for hosting, create a CloudFront CDN distribution, connect it to a domain, and then deploy the files. Phew. That's a lot of stuff, but Serverless Studio makes it just a few clicks.

Serverless Studio works with multiple languages like Go, Python, Node.js, etc. It doesn't ship with Node.js, but React needs it. If you don't have it you can download it here.

Setup

The first step is business as usual. In a directory where you want your code to live, run the create-react-app command:

cd ~/projects
create-react-app my-website

After creating some code, we're ready to start using the Serverless Studio application. When you launch the app for the first time you'll see a screen like this:

Select New Website and choose the ~/projects/my-website directory that was created with create-react-app.

Local Development

Serverless Studio comes with a built-in local HTTP server. However, for this demo, we can just use the HTTP server provided by create-react-app.

All website configuration settings are in the accordion of the main panel. Under Local Server, let's check the Custom Local Server checkbox and enter npm start as the command.

Now you can launch the website by clicking the play icon in the top toolbar.

Deployment

To deploy, select the target environment you would like to deploy to. For example, some people have separate AWS accounts for testing, staging, and production environments.

Adding a build step

In the Build Command section, enter npm run build into the Pre Deploy Command input. Select the directory ./build for the build output. The build output is all the artifacts created by the Create React App program. This is optional, but it's really nice to have this automatically happen at the click of a button.

With the build configuration all set, you are ready to start deploying your website.

You can hit the deploy button and your website will be setup in AWS.

After clicking the deploy button, Serverless Studio will upload your static assets to AWS S3 under the hood and then configure a CloudFront CDN to put in front of your S3 files.

Setting up a CloudFront CDN can take a few minutes. However, once it's finished setting up, you can hit the play button and visit the newly deployed website in your web browser.

Recap

Serverless Studio ties together a lot of complicated parts for you. It also let's your bring you own framework and your favorite language. You can use your own build step and local server, or work with plain old HTML.

You can check out the source code of the React Hello World example here

If you have any questions or feedback, join our Discord Community

P2P & Community News
Subscribe