✍️ Opinionated project architecture for Full-Stack JavaScript Applications.
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.
Landing | |
Web | |
Mobile | |
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)