โ๏ธ Opinionated project architecture for Full-Stack JavaScript Applications.
MIT License
๐ Upgraded version is now available!
An upgraded and more modern version with full-stack monorepo, featuring an event-driven, highly scalable architecture using Node.js, React, Redis, MongoDB, and Docker is now available, check out github.com/atulmy/fullstack-event-driven-architecture
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:
fsja
โโโ backend
โ โโโ api
โ โ > NodeJS
โ โ > PORT 8000
โ โ > api.example.com
โ โ
โ โโโ database
โ โ > MongoDB
โ โ > PORT 27017
โ โ
โ โโโ proxy
โ > NGINX
โ > PORT 80 / 443
โ
โโโ 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)
Landing
Web
Mobile (iOS, Android)
Prerequisites
v10.x
)v4.x
)Clone repository git clone [email protected]:atulmy/fullstack-javascript-architecture.git fullstack
API
api
directory cd backend/api
cp .env.dev.example .env.local
.env.local
for
PORT
(8000
)NODE_ENV
(development
| production
)SECURITY_SECRET
(Use PasswordsGenerators)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 service, eg. mailgun.com and get credentials to start sending emailsnpm run setup
npm start
(http://localhost:8000)Landing
landing
directory cd frontend/landing
cp .env.dev.example .env.local
.env.local
for
PORT
(3000
)NODE_ENV
(development
| production
)URL_LANDING
(http://localhost:3000
)URL_WEB
(http://localhost:5000
)URL_API
(http://localhost:8000
)GA_TRACKING_ID
(Google analytics tracking ID)npm install
npm start
, browse at http://localhost:3000
Web
web
directory cd frontend/app/web
cp .env.dev.example .env.local
.env.local
for
PORT
(5000
)REACT_APP_LANDING_URL
(http://localhost:3000
)REACT_APP_WEB_URL
(http://localhost:5000
)REACT_APP_API_URL
(http://localhost:8000
)npm install
npm start
, browse at http://localhost:5000
Deployment
mkdir /var/www/fullstack
and switch to the directory cd /var/www/fullstack
git clone [email protected]:atulmy/fullstack-javascript-architecture.git .
deployment
directory cd deployment
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 namescd /var/www/fullstack
git pull
docker-compose up --build -d
Mobile
mobile
directory cd frontend/app/mobile
src/setup/config/env.js
for
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
)ifconfig
on macOS or Linux to get your local IP addressnpm install
react-native run-ios --simulator='iPhone 8'
react-native run-android
(connect your Android phone via USB or use already created simulator with name Mobile_-_5
by running cd ~/Library/Android/sdk/tools && ./emulator -avd Mobile_-_5
)cd android && ./gradlew assembleRelease && cd ..
.frontend/app/mobile/android/app/build/outputs/apk/release/app-release.apk
to Play Store.frontend/app/mobile/ios/example.xcodeproj
in Xcode -> Choose Generic iOS Device (top left) -> Product (top menu) -> Archive.View all screenshots here.
Looking for a developer to build your next idea or need a developer to work remotely? Get in touch: [email protected]
If you liked this project, you can donate to support it โค๏ธ
Thank you for donating:
Copyright (c) 2018 Atul Yadav http://github.com/atulmy
The MIT License (http://www.opensource.org/licenses/mit-license.php)