serverless-components / Fullstack App

A complete, serverless, full-stack application built on AWS Lambda, AWS HTTP API, Express.js, React and DynamoDB.

Live Demo: https://www.serverless-fullstack-app.com

Quick Start

Install the latest version of the Serverless Framework:

npm i -g serverless

After installation, make sure you connect your AWS account by setting a provider in the org setting page on the Serverless Dashboard.

Then, initialize the fullstack-app template:

serverless init fullstack-app
cd fullstack-app

Then, add the following environment variables in an .env file in the root directory, like this:

# This signs you JWT tokens used for auth.  Enter a random string in here that's ~40 characters in length.
tokenSecret=yourSecretKey

# Only add this if you want a custom domain.  Purchase it on AWS Route53 in your target AWS account first.
domain=serverless-fullstack-app.com

In the root folder of the project, run serverless deploy

Lastly, you will need to add your API domain manually to your React application in ./site/src/config.js, so that you interact with your serverless Express.js back-end. You can find the your API url by going into ./api and running serverless info and copying the url: value. It should look something like this https://9jfalnal19.execute-api.us-east-1.amazonaws.com or it will look like the custom domain you have set.

Note: Upon the first deployment of your website, it will take a 2-3 minutes for the Cloudfront (CDN) URL to work. Until then, you can access it via the bucketUrl.

After initial deployment, we recommend deploying only the parts you are changing, not the entire thing together (why risk deploying your database with a code change?). To do this, cd into a part of the application and run serverless deploy.

When working on the ./api we highly recommend using serverless dev. This command watches your code, auto-deploys it, and streams console.log() statements and errors directly to your CLI in real-time!

If you want to add custom domains to your landing pages and API, either hardcode them in your serverless.yml or reference them as environment variables in serverless.yml, like this:

inputs:
  domain: ${env:domain}

domain=serverless-fullstack-app.com

Support for stages is built in.

You can deploy everything or individual components to different stages via the --stage flag, like this:

serverless deploy --stage prod

Or, you can hardcode the stage in serverless.yml (not recommended):

app: fullstack
component: [email protected]
name: fullstack-api
stage: prod # Put the stage in here

Lastly, you can add separate environment variables for each stage using .env files with the stage name in them:

.env # Any stage
.env.dev # "dev" stage only
.env.prod # "prod" stage only

Then simply reference those environment variables using Serverless Variables in your YAML:

app: fullstack
component: [email protected]
name: fullstack-api

inputs:
  domain: api.${env:domain}

And deploy!

serverless deploy --stage prod

Enjoy! This is a work in progress and we will continue to add funcitonality to this.

Other Resources

For more details on each part of this fullstack application, check out these resources:

• Serverless Components
• Serverless Express
• Serverless Website
• Serverless AWS DynamoDB
• Serverless AWS IAM Role

Guides

How To Debug CORS Errors

If you are running into CORS errors, see our guide on debugging them within the Express Component's repo