How to Create and Deploy a Serverless React App

Frank Zickert

TL;DR:Infrastructure Components let you create, start, and deploy a Serverless React App easily. The component <SinglePageApp/> does all the technical configuration for you and enables you to concentrate on writing the business logic of your App.

Infrastructure-Components provide an easy way to create React applications without struggling with the configuration. There is no need to manually configure Webpack, Babel, and Serverless anymore!

The following piece of code is a complete Serverless React App that you can build, start (locally), or deploy (to AWS) with a single command.

Get your customized boilerplate code

Code-Architect provides the easiest way to get started with Infrastructure-Components. It lets you create your customized boilerplate code with a few clicks.

  1. Login with your GitHub account at www.code-architect.com
  2. Specify a name for your React app (like myapp) and a name of an environment, (e.g. dev)
  3. Download and unpack your boilerplate code
  4. Install all the dependencies, run: npm install (maybe you require sudo-rights)

Further, Code-Architect provides a managed service! You don’t even require your own AWS account!

Example Project

Alternatively, have a look at this GitHub repository. It contains an example that you can fork or clone and simply run npm install.

Manual Installation

You created your app with create-react-app or started it with npm init? No problem. You can setup Infrastructure-Components with the following steps:

1 . The library infrastructure-components contains the React components that you can use directly in your application’s source code.

npm install --save infrastructure-components

2 . The library infrastructure-scripts comprises the scripts required of building, starting, and deploying the app. For this lib contains many tools that you only need during development/deployment, install this library as devDependency. You need to install serverless and serverless-single-page-app-plugin as devDependency, too:

npm install --save-dev 
infrastructure-scripts

serverless

serverless-single-page-app-plugin

3 . Edit the build command in your package.json file. The library infrastructure-scripts provides the scripts command. Run it with the arguments build and the relative path to the file that exports the <SinglePageApp/> component, e.g. src/index.tsx.

"scripts": {
"build": "scripts build src/index.tsx"
}

The build process adds further scripts to your package.json. These let you start your software stack offline in hot-development-mode and let you deploy it to AWS.

scripts {your_app_name} src/index.tsx or npm run {your_app_name} starts your web-app in hot-development-mode (replace {your_app_name} with the stackName of your SinglePageApp-Component).

Wait until the console says that your app is running and open localhost:3000 in your browser. You should see your app displaying “Hello Infrastructure Components” — or whatever your own component renders.

Changes to your source code become effective immediately in this mode. Just reload your page in the browser.

Code-Architect provides a managed service. You don’t need to have an AWS account and you can skip its setup!

Deploy to AWS — Preparations (one-time only, skip if using Code-Architect)

Deploying your app requires:

1 . An AWS account that you can create at https://aws.amazon.com

2 . A technical user (with programmatic access / API-key)

In your AWS-console, open the IAM menu and create a new user with the following policy:

You’ll get a AWS Key Id and an AWS Secret Key.

3 . Put these into the.env-file in your project root.

AWS_ACCESS_KEY_ID=***...***
AWS_SECRET_ACCESS_KEY=***...***

Deployment

Once you have your credentials at the right place (or you used Code-Architect), we can now deploy it to AWS with a single command: npm run deploy-{your-environment-name}.

Replace {your-environment-name} with the name you specified in the <Environment/> component. Infrastructure-Components support multiple environments per project, e.g. a dev-environment and a prod-environment.

Once you started the deploy command, the scripts create the whole infrastructure stack on your AWS account. You’ll get back an URL like https://{your_app_name}-{your-environment-name}.s3.amazonaws.com that now serves your app.

Note: the deployment of the software stack may take some time (up to an hour for the first deployment). Subsequent deployments will be much faster.

Code-Architect further supports the use of a custom domain, like www.your-domain.com. If you want to setup a custom domain manually, you may find useful information in this post.

Support and Resources

Infrastructure-Components are under active development. If you find a bug, if your deployment throws an error — that is not related to your code 😉 — or when need support of any kind, please report at https://spectrum.chat/infrastructure. Thank you!

Our Documentation describes how to use Infrastructure-Components in more detail.

Infrastructure-Components are open-source! So have a look at our GitHub-repository.

What’s next?

The journey of Infrastructure-Components just started. The shorter the list of current features may still be, the longer is the list of the backlog! Please don’t miss the next update of Infrastructure-Components.