Repository files navigation

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

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 theServerless Dashboard.

Then, initialize thefullstack-app template:

serverless init fullstack-appcd 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, runserverless 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 runningserverless info and copying theurl: value. It should look something like thishttps://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 thebucketUrl.

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 runserverless deploy.

When working on the./api we highly recommend usingserverless dev. This command watches your code, auto-deploys it, and streamsconsole.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 yourserverless.yml or reference them as environment variables inserverless.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 inserverless.yml (not recommended):

app:fullstackcomponent:express@0.0.20name:fullstack-apistage: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:fullstackcomponent:express@0.0.20name:fullstack-apiinputs: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.

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

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