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.
The first step is business as usual. In a directory where you want your code to
live, run the
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:
New Website and choose the
~/projects/my-website directory that
was created with
Serverless Studio comes with a built-in local HTTP server. However, for
this demo, we can just use the HTTP server provided by
All website configuration settings are in the accordion of the main panel.
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.
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.
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