Opinionated project architecture for Full-Stack JavaScript Applications.

Using JavaScript for full-stack has always been a challenge especially with architecting various pieces of the application, choosing technologies and managing devOps. This project provides a base for typical project consisting a Landing Website and Web applications, API service and easy deployment of these services. This project uses a microservice architecture where all individual project runs as a service (container).

A typical product (SaaS, etc.) usually consists of following services:

• Landing page

  • Used for introducing your business to customers
  • Provide links to download the mobile application
  • Provide link to access web application
  • Contact page
  • Privacy policy page
  • Terms of use page
  • SEO friendly (should support server side rendering)

• Web Application

  • Your actual application for your customers to use
  • Desktop browser
  • Tablet and mobile browser via responsive design

fsja
  ├── backend
  │   ├── api
  │   │   > NodeJS
  │   │   > PORT 8000
  │   │   > api.example.com
  │   │
  │   ├── database
  │   │   > MongoDB
  │   │   > PORT 27017
  │   │
  │   └── proxy
  │       > NGINX
  │       > PORT 80 / 443
  │
  ├── deployment
  │   > Docker Compose
  │
  ├── frontend
  │   ├── app
  │   │   │
  │   │   └── web
  │   │       > React
  │   │       > Single page application
  │   │       > PORT 5000
  │   │       > app.example.com
  │   │
  │   └── landing
  │       > React
  │       > Server side rendered
  │       > PORT 3000
  │       > example.com
  │
  └── README.md (you are here)

• API
  • NodeJS
  • Express
• Database
  • MongoDB
• Proxy
  • NGINX

• Web
  • React
  • Redux
  • React Router
  • Material UI

• Technologies
  • Docker
  • Docker compose

• Prerequisites

  • Node (v10.x)
  • MongoDB (v4.x)
  • Follow React Native Guide to setup your local machine

• Clone repository git clone https://github.com/samuelarogbonlo/fullstackJSTestApp.git

• API

  • Info

    • Authentication strategy: JWT (JSON Web Token)
    • Uses RPC (Remote Procedure Call) for API endpoints (one endpoint URL, multiple operations)
    • Resources
      • Lightweight RPC API pattern

  • Switch to api directory cd backend/api

  • Configuration

    • Create local environment file cp .env.dev.example .env.local
    • Modify .env.local for
      • PORT (8080)
      • NODE_ENV (development | production)
      • SECURITY_SECRET (Use passwordsgenerator)
      • SECURITY_SALT_ROUNDS (10)
      • MONGO_URL (mongodb://localhost:27017/example)
      • LANDING_URL (http://localhost:3000)
      • WEB_URL (http://localhost:5000)
      • API_URL (http://localhost:8000)
      • EMAIL_ON (0 | 1 (in development, you can toggle to send emails or not))
      • EMAIL_TEST (send test emails to this address)

  • Setup

    • Install packages and seed database npm run setup

  • Run

    • Start API server: npm start (http://localhost:8000)

• Web

  • Switch to web directory cd frontend/app/web
  • Configuration
    • Create local environment file cp .env.dev.example .env.local
    • Modify .env.local for
      • PORT (3000)
      • REACT_APP_WEB_URL (http://localhost:3000)
      • REACT_APP_API_URL (http://localhost:8000)
  • Setup
    • Install dependencies: npm install
  • Run
    • Start Web server: npm start, browse at http://localhost:3000

• Deployment

  • Deploy code
    1. Login to the server (SSH)
    2. Create a new directory on server: mkdir /var/www/fullstack and switch to the directory cd /var/www/fullstack
    3. Clone repository git clone https://github.com/samuelarogbonlo/fullstackJSTestApp.git .
    4. Switch to deployment directory cd deployment
    5. Build containers docker-compose up --build -d
       • up = Builds, (re)creates, starts, and attaches to containers for a service.
       • --build = Build images before starting containers
       • -d = Detached mode: Run containers in the background, print new container names
  • Resources - Set Up Free SSL Certificates from Let's Encrypt using Docker and Nginx 6. Re-deploy with following steps: - Change directory cd /var/www/fullstack - Pull latest code git pull - Rebuild containers: docker-compose up --build -d

• Pulumi

  • The link to the Pulumi update for the Cresh Test is thus 'https://app.pulumi.com/samuelarogbonlo/CreshTest/creshtest'

View all screenshots here.

Landing
Web
	Authors Samuel Arogbonlo - GitHub · Twitter Collaborators [YOUR NAME HERE] - Feel free to contribute to the codebase by resolving any open issues, refactoring, adding new features, writing test cases or any other way to make the project better and helpful to the community. Feel free to fork and send pull requests. Resources and Inspirations Start learning by looking at sample codes on GitHub: #LearnByExamples Hire me Looking for a devops engineer to build your next infrastruture to work remotely? Get in touch: [email protected] License The MIT License (http://www.opensource.org/licenses/mit-license.php)