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
- Node (
-
Clone repository
git clone https://github.com/samuelarogbonlo/fullstackJSTestApp.git
-
API
-
Info
-
Switch to
api
directorycd backend/api
-
Configuration
- Create local environment file
cp .env.dev.example .env.local
- Modify
.env.local
forPORT
(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)
- Create local environment file
-
Setup
- Install packages and seed database
npm run setup
- Install packages and seed database
-
Run
- Start API server:
npm start
(http://localhost:8000)
- Start API server:
-
-
Web
- Switch to
web
directorycd frontend/app/web
- Configuration
- Create local environment file
cp .env.dev.example .env.local
- Modify
.env.local
forPORT
(3000
)REACT_APP_WEB_URL
(http://localhost:3000
)REACT_APP_API_URL
(http://localhost:8000
)
- Create local environment file
- Setup
- Install dependencies:
npm install
- Install dependencies:
- Run
- Start Web server:
npm start
, browse at http://localhost:3000
- Start Web server:
- Switch to
-
Deployment
- Deploy code
- Login to the server (SSH)
- Create a new directory on server:
mkdir /var/www/fullstack
and switch to the directorycd /var/www/fullstack
- Clone repository
git clone https://github.com/samuelarogbonlo/fullstackJSTestApp.git .
- Switch to
deployment
directorycd deployment
- 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 codegit pull
- Rebuild containers:docker-compose up --build -d
- Deploy code
-
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 | |
![]() |
![]()
Looking for a devops engineer to build your next infrastruture to work remotely? Get in touch: [email protected] The MIT License (http://www.opensource.org/licenses/mit-license.php) |