Serverless React Boilerplate

screenshot of Serverless React Boilerplate
99x
By99x

Serverless React Boilerplate

A serverless react boilerplate for offline development

Overview

The serverless-react-boilerplate is a sample Todo App that utilizes serverless architecture with React.js. It supports serverless v1.26.0 and allows for offline development with dynamodb, lambda, and API Gateway.

Features

  • Support for serverless v1.26.0
  • Offline development with dynamodb, lambda, and API Gateway
  • Local dynamodb seeds/migrations
  • Build automation in client and server for local development
  • Deployment to multiple API Services
  • Use of Environment variables
  • Lambda CRUD operations for a Todo application with live reload
  • React web application to utilize the API

Installation

  1. Clone the repository.
  2. Set up AWS credentials properly.
  3. Add the AWS CLI profile name and region to the serverless.yml file located at /api/todo/serverless.yml.
  4. Install serverless globally.
  5. Install project dependencies by navigating to the serverless-react-boilerplate directory and running the npm install command.
  6. Install dynamodb local, ensuring that you have Java runtime 6.x or newer.
  7. Run the app with the local server.
  8. The todo app will open in your browser at http://localhost:3001.

Summary

The serverless-react-boilerplate is a sample Todo App that showcases the use of serverless architecture with React.js. It provides various features to support offline development, deployment to multiple API services, and use of environment variables. The installation process is straightforward, requiring the cloning of the repository, setting up AWS credentials, and installing the necessary dependencies. Overall, this boilerplate serves as a useful starting point for developing serverless applications with React.js.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.