Repository files navigation

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, Web and Mobile 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

• Mobile Application

  • Your actual application for your customers to use
  • Android (Mobile/Tablet)
  • iOS (Mobile/Tablet)

fsja  ├── backend  │   ├── api  │   │   > NodeJS  │   │   > PORT 8000  │   │   > api.example.com  │   │  │   ├── database  │   │   > MongoDB  │   │   > PORT 27017  │   │  │   └── proxy  │       > NGINX  │  ├── deployment  │   > Docker Compose  │  ├── frontend  │   ├── app  │   │   ├── mobile  │   │   │   > React Native  │   │   │   > iOS (Apple App Store)  │   │   │   > Android (Google Play Store)  │   │   │  │   │   └── 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
  • Technologies
    • NodeJS
    • Express
• Database
  • Technologies
    • MongoDB
• Proxy
  • Technologies
    • NGINX

• Landing

  • Technologies
    • NodeJS
    • Express
    • React
    • React Router
    • Server Side Rendering
    • Material UI

• Web

  • Technologies
    • React
    • Redux
    • React Router
    • Material UI

• Mobile (iOS, Android)

  • Technologies
    • React Native
    • Redux
    • React Navigation

• Technologies
  • Docker
  • Docker compose

• Prerequisites

  • Node (v10.x)
  • MongoDB (v4.x)
  • Xcode (for iOS) (latest)
  • Android Studio (for Android) (latest)
  • FollowReact Native Guide to setup your local machine

• Clone repogit clone git@github.com:atulmy/fullstack-javascript-architecture.git fullstack

• API

  • Info
    • Authentication strategy:JWT (JSON Web Token)
    • UsesRPC (Remote Procedure Call) for API endpoints (one endpoint URL, multiple operations)
    • Resources
      • Lightweight RPC API pattern
  • Switch toapi directorycd backend/api
  • Configuration
    • Create local environment filecp .env.dev.example .env
    • Modify.env for
      • PORT (8000)
      • NODE_ENV (development |production)
      • SECURITY_SECRET (Usepasswordsgenerator)
      • 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)
      • EMAIL_HOST,EMAIL_USER,EMAIL_PASSWORD (use any email servive, eg.mailgun.com and get info to start sending emails
  • Setup
    • Install packages and seed databasenpm run setup
  • Run
    • Start API server:npm start (http://localhost:8000)

• Landing

  • Switch tolanding directorycd frontend/landing
  • Configuration
    • Create local environment filecp .env.dev.example .env
    • Modify.env for
      • PORT (3000)
      • NODE_ENV (development |production)
      • LANDING_URL1 (http://localhost:3000`)
      • WEB_URL (http://localhost:5000)
      • API_URL (http://localhost:8000)
      • CONTACT_PHONE,CONTACT_EMAIL,CONTACT_ADDRESS (your contact information)
      • GA_TRACKING_ID (Google analytics tracking ID)
  • Setup
    • Install dependencies:npm install
  • Run
    • Start Landing server:npm start, browse athttp://localhost:3000
  • Resources
    • Usegetterms.io to generate Privacy Policy / Terms of Use
    • Favicon generatorrealfavicongenerator

• Web

  • Switch toweb directorycd frontend/app/web
  • Configuration
    • Create local environment filecp .env.dev.example .env
    • Modify.env for
      • PORT (5000)
      • REACT_APP_LANDING_URL (http://localhost:3000)
      • REACT_APP_WEB_URL (http://localhost:5000)
      • REACT_APP_API_URL (http://localhost:8000)
  • Setup
    • Install dependencies:npm install
  • Run
    • Start Web server:npm start, browse athttp://localhost:5000

• Deployment

  • Deploy code
    1. Login to the server (SSH)
    2. Switch todeployment directorycd deployment
    3. Pull latest codegit pull
    4. Build containersdocker-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

• Mobile

  • Switch tomobile directorycd frontend/app/mobile
  • Configuration
    • Create local environment filecp .env.dev.example .env
    • Modify.env for
      • APP_ID (com.example (your app bundle ID))
      • APP_VERSION (0.0.1 (increment this for each publish on App or Play Store))
      • APP_BUILD (1 (increment this for each publish on App or Play Store))
      • APP_ENV (development |production)
      • LANDING_URL (http://<your local network IP>:3000)
      • WEB_URL (http://<your local network IP>:5000)
      • API_URL (http://<your local network IP>:8000)
      • Tip: useifconfig on macOS or Linux to get your local IP address
  • Setup
    • Install dependencies:npm install
  • Run
    • iOSENVFILE=.env react-native run-ios --simulator='iPhone 8'
    • AndroidENVFILE=.env react-native run-android (connect your Android phone via USB or use already created simulator with nameMobile_-_5 by runningcd ~/Library/Android/sdk/tools && ./emulator -avd Mobile_-_5)
  • Publish
    • Android
      • Build:. ./.env.production && cd android && ./gradlew assembleRelease && cd ...
      • Uploadfrontend/app/mobile/android/app/build/outputs/apk/release/app-release.apk to Play Store.
    • iOS
      • Build: Openfrontend/app/mobile/ios/example.xcodeproj in Xcode -> Choose Generic iOS Device (top left) -> Product (top menu) -> Archive.
      • Upload using Archiver (will open automatically once Arhive is complete)
  • Resources
    • From react-native init to app stores real quick
    • iOS App icon and splashscreen generatorappicon
    • Icon generatormakeappicon
    • Icons and splashscreen generatorimagegorilla

View all screenshotshere.

Landing
Web
Mobile

• Atul Yadav -GitHub ·Twitter
• [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.

Looking for a developer to build your next idea or need a developer to work remotely? Get in touch:atul.12788@gmail.com

Copyright (c) 2018 Atul Yadavhttp://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)