Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/serverless-components/fullstack-app
⚡ Ready-to-use, serverless, full-stack application built with AWS Lambda, Express.js, React, AWS DynamoDB and AWS HTTP API.
https://github.com/serverless-components/fullstack-app
aws-dynamodb aws-http-api aws-lambda express nodejs react serverless serverless-framework
Last synced: 3 days ago
JSON representation
⚡ Ready-to-use, serverless, full-stack application built with AWS Lambda, Express.js, React, AWS DynamoDB and AWS HTTP API.
- Host: GitHub
- URL: https://github.com/serverless-components/fullstack-app
- Owner: serverless-components
- Created: 2020-04-27T22:17:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-11-12T04:19:38.000Z (about 1 year ago)
- Last Synced: 2025-01-13T20:13:16.019Z (10 days ago)
- Topics: aws-dynamodb, aws-http-api, aws-lambda, express, nodejs, react, serverless, serverless-framework
- Language: JavaScript
- Homepage: https://www.serverless.com
- Size: 1.05 MB
- Stars: 320
- Watchers: 10
- Forks: 70
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.serverless-fullstack-app.com)
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](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](https://app.serverless.com).
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:
```text
# 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:
```yaml
inputs:
domain: ${env:domain}
```
```text
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):
```yaml
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:
```bash
.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:
```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](https://github.com/serverless/components)
* [Serverless Express](https://github.com/serverless-components/express)
* [Serverless Website](https://github.com/serverless-components/website)
* [Serverless AWS DynamoDB](https://github.com/serverless-components/aws-dynamodb)
* [Serverless AWS IAM Role](https://github.com/serverless-components/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](https://github.com/serverless-components/express/blob/master/README.md#how-to-debug-cors-errors)