Skip to content

gnemtsov/ab-app

Repository files navigation

Introduction

AB-APP is an AWS serverless boilerplate application. You can use it as a starting point for your own applications. AB-APP is using bit, so you can not only use it as a whole but also make use of some parts of it.

AB-APP is a site of fictional "Scientific Research Institute of Sorcery and Wizardry" from the famous novel by Boris and Arkady Strugatsky "Monday Begins on Saturday". AB-APP exposes the list of institute departments for authenticated users. It also allows to add and edit departments.

AB-APP is deployed here: d1v3l4fe3mshyi.cloudfront.net. It might not be the last version as we don't redeploy every time we push changes in the repo. Also, note that when visiting the link for the first time application may load slowly. This is because of the lambda cold start. In production warm up dump requests should be used to keep your lambda in a warm state.

Current status

AB-APP is still under development. It is not finished! Feel free to experiment with it, but don't use it in production as is. Documentation might also be outdated, but we try to keep it in a more or less actual state.

Architecture

AB-APP architecture

The application uses RDS/DynamoDB and S3 for persistent storage. A single lambda function holds all the backend logic. API Gateway (for now) is used as a proxy service to pass requests from the frontend to the backend. CloudFront CDN allows delivering the application's content fast.

The application has two main folders: backend and frontend. Backend folder contains backend code and frontend folder contains static content (frontend code, assets, etc.)

AB-APP backend is written in Node.js. AB-APP frontend is written with React, Redux, and Redux-Saga.

Features implemented

Authentication using JWT tokens + tokens refresh.

Tables for viewing data with pagination, row selection, sorting and CSV export.

Forms for adding and editing data with live, backend-frontend consistent validation.

TODO

  • Replace API Gateway with AppSync. AppSync provides a convenient way of communication between frontend and backend using GraphQL queries and is also responsible for offline and real-time functionality.
  • Add DynamoDB support
  • Add real-time features
  • Add PWA features and offline functionality

Table of contents

Installation

  1. Install a database (MariaDB), Node.js, NPM, docker, aws-sam-cli and Redux DevTools extension
  2. Git clone or download the project source
  3. Run npm install in the root folder, the frontend, and the backend folders
  4. Import mysql.dump.sql in your MariaDB instance
  5. Create the file backend/.env with the following content (replace DB_HOST with IP of your local DB instance):
#Environment
PROD=false

#Token secret
SECRET="SOME_SECRET_CODE_672967256"

#DB
DB_HOST="192.168.1.5"
DB_NAME="abapp"
DB_USER="abapp"
DB_PASSWORD="abapp"
  1. Create a user abapp with password abapp in your mysql.user table and give appropriate rights to allow the lambda function to connect and work with your database

Starting AB-APP locally

  1. Run docker and then run sam local start-api to start local API Gateway (set --docker-volume-basedir parameter to your .../backend dir, if you use remote docker)
  2. Run npm start in the frontend folder to start webpack development server
  3. Have fun! 😃

How to contribute

  1. Click the "Fork" button.
  2. Clone your fork to your local machine:
git clone https://github.com/YOUR_USERNAME/ab-app.git
  1. Add 'upstream' repo to keep your form up to date:
git remote add upstream https://github.com/gnemtsov/ab-app.git
  1. Fetch latest upstream changes:
git fetch upstream
  1. Checkout your master branch and merge the upstream repo's master branch:
git checkout master
git merge upstream/master
  1. Create a new branch and start working on it:
git checkout -b NEW_FEATURE
  1. Push your changes to GitHub.
  2. Go to your fork's GitHub page and click the pull request button.

Further reading