当前位置: 首页 > 软件库 > Web应用开发 > >

fullstack-app

授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发
软件类型 开源软件
地区 不详
投 递 者 淳于兴朝
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Serverless Fullstack Application Express React DynamoDB AWS Lambda AWS HTTP API

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: express@0.0.20
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: express@0.0.20
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:

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

 相关资料
  • Fullstack GraphQL Simple Demo Application API built with Node + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with React + Redux. Written in ES6 using Babel

  • Vue fullstack template This project's goal is to help people create a reactive, realtime and user friendly backend system. �� Vue version This template only support vue2, because it use ElementUI as t

  • Apollo tutorial This is the fullstack app for the Apollo tutorial. �� File structure The app is split out into two folders: start: Starting point for the tutorial final: Final version From within the

  • Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It comes with many modern technologies; Relay, GraphQL,

  • Motivation ⭐ Setting up boiler plates when starting new projects is tedious sometimes and I often found myself setting it up from scratch �� Hence I made this starterkit following some of the best pat

  • Entria FullStack Playground Let's us know how can we help Read more about Playgrounds: https://medium.com/@sibelius/why-your-company-should-have-an-open-source-playground-4bb93068ce95 Getting Started