├── Vercel_JSON_Config_For_MERN.md ├── MongoDB_Setup_on_VPS.md ├── Basic_Express_with_Typescript.md └── Deploy_MERN_on_VPS.md /Vercel_JSON_Config_For_MERN.md: -------------------------------------------------------------------------------- 1 | 2 | ## vercel.json 3 | 4 | Vercel json config for express backend 5 | 6 | ```bash 7 | { 8 | "version": 2, 9 | "builds": [ 10 | { 11 | "src": "server.js", 12 | "use": "@vercel/node", 13 | "config": { 14 | "includeFiles": [ 15 | "dist/**" 16 | ] 17 | } 18 | } 19 | ], 20 | "routes": [ 21 | { 22 | "src": "/(.*)", 23 | "dest": "server.js" 24 | } 25 | ] 26 | } 27 | ``` 28 | 29 | Vercel json config to support React Router in frontend 30 | 31 | ```bash 32 | { 33 | "rewrites": [ 34 | { 35 | "source": "/(.*)", 36 | "destination": "/" 37 | } 38 | ] 39 | } 40 | ``` 41 | 42 | -------------------------------------------------------------------------------- /MongoDB_Setup_on_VPS.md: -------------------------------------------------------------------------------- 1 | 2 | ## Setup MongoDB on VPS 3 | 4 | 5 | Install MongoDB 6 | 7 | ```bash 8 | sudo apt-get install gnupg curl 9 | ``` 10 | ```bash 11 | curl -fsSL https://www.mongodb.org/static/pgp/server-8.0.asc | \ 12 | sudo gpg -o /usr/share/keyrings/mongodb-server-8.0.gpg \ 13 | --dearmor 14 | ``` 15 | Create the MongoDB list file. 16 | 17 | ```bash 18 | echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-8.0.gpg ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/8.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-8.0.list 19 | ``` 20 | Update package lists and install MongoDB. 21 | 22 | ```bash 23 | sudo apt-get update 24 | ``` 25 | 26 | ```bash 27 | sudo apt-get install -y mongodb-org 28 | ``` 29 | Start and enable MongoDB service. 30 | 31 | ```bash 32 | sudo systemctl daemon-reload 33 | ``` 34 | ```bash 35 | sudo systemctl start mongod 36 | ``` 37 | ```bash 38 | sudo systemctl enable mongod 39 | ``` 40 | Verify that MongoDB has started successfully. 41 | ```bash 42 | sudo systemctl status mongod 43 | ``` 44 | MongoDB URI to connect with projects. 45 | ```bash 46 | mongodb://127.0.0.1:27017 47 | ``` 48 | 49 | ### Configure MongoDB Authentication ( Optional ) 50 | 51 | #### Allowing MongoDB through firewall 52 | 53 | Enable firewall 54 | 55 | ```bash 56 | sudo ufw enable 57 | ``` 58 | 59 | Check Port is Allowed through Firewall 60 | ```bash 61 | sudo ufw status 62 | ``` 63 | 64 | If Port is not Allowed then Allow it through Firewall 65 | ```bash 66 | sudo ufw allow 27017 67 | ``` 68 | ```bash 69 | sudo ufw allow 'OpenSSH' 70 | ``` 71 | Restart MongoDB 72 | ```bash 73 | sudo service mongod restart 74 | ``` 75 | #### Secure MongoDB by setting up Super User. 76 | 77 | Connect to MongoDB shell 78 | ```bash 79 | mongosh 80 | ``` 81 | Show database 82 | 83 | ```bash 84 | show dbs 85 | ``` 86 | 87 | Change to admin database 88 | 89 | ```bash 90 | use admin 91 | ``` 92 | 93 | Create superuser with all privileges 94 | 95 | ```bash 96 | db.createUser({user: "username-here" , pwd: passwordPrompt() , roles: ["root"]}) 97 | ``` 98 | 99 | Now Exit mongosh shell 100 | 101 | ```bash 102 | .exit 103 | ``` 104 | 105 | Enable Authorization removing comment 106 | 107 | ```bash 108 | sudo nano /etc/mongod.conf 109 | ``` 110 | 111 | ```bash 112 | security: 113 | authorization: enabled 114 | ``` 115 | Restart MongoDB 116 | ```bash 117 | sudo service mongod restart 118 | ``` 119 | 120 | To Access Mongo Shell as Super User use this command: 121 | ```bash 122 | mongosh --port 27017 --authenticationDatabase "admin" -u "username-here" -p "password-here" 123 | ``` 124 | 125 | Create Database & User for project: 126 | ```bash 127 | use database_name 128 | ``` 129 | ```bash 130 | db.createUser({user:"username_here", pwd:passwordPrompt(), roles:[{role:"readWrite", db:"database_name"}]}) 131 | ``` 132 | 133 | Now Exit mongosh shell 134 | 135 | ```bash 136 | .exit 137 | ``` 138 | 139 | MongoDB URI to Connect with projects: 140 | ```bash 141 | mongodb://username-here:password-here@127.0.0.1:27017/database_name 142 | ``` 143 | -------------------------------------------------------------------------------- /Basic_Express_with_Typescript.md: -------------------------------------------------------------------------------- 1 | ## Guide to Setup Up a Basic Express Server with TypeScript 2 | 3 | This guide provides a step-by-step process for setting up a basic web server using Express.js and TypeScript. 4 | Prerequisites 5 | Ensure you have the following installed: 6 | 7 | Node.js ( Latest LTS recommended ) 8 | npm (or yarn/pnpm) 9 | 10 | ### 1. Project Initialization 11 | 12 | Start by creating a new directory for your project and initializing a new Node.js project. 13 | 14 | ```bash 15 | mkdir server 16 | ``` 17 | 18 | ```bash 19 | cd server 20 | ``` 21 | 22 | ```bash 23 | npm init -y 24 | ``` 25 | 26 | ### 2. Install Dependencies 27 | 28 | Install Express and the necessary TypeScript-related packages. 29 | Production Dependencies 30 | 31 | Install Express, the web framework 32 | 33 | ```bash 34 | npm install express 35 | ``` 36 | 37 | Install TypeScript, the type definitions for Express and Node.js, and `tsx` for running the server without a pre-compiled step. 38 | 39 | ```bash 40 | npm install -D typescript tsx @types/node ts-node @types/express nodemon 41 | ``` 42 | 43 | ### 3. Configure TypeScript 44 | 45 | Create a `tsconfig.json` file in your project root to configure the TypeScript compiler. You can generate a default file using the following command 46 | 47 | ```bash 48 | npx tsc --init 49 | ``` 50 | 51 | For a basic setup, ensure your `tsconfig.json` has at least these settings: 52 | 53 | ```json 54 | { 55 | "compilerOptions": { 56 | "target": "ES2020", 57 | "module": "nodenext", 58 | "moduleResolution":"nodenext", 59 | "outDir": "./dist", 60 | "rootDir": "./", 61 | "strict": true, 62 | "esModuleInterop": true, 63 | "skipLibCheck": true, 64 | "forceConsistentCasingInFileNames": true 65 | }, 66 | "include": [ 67 | "./**/*.ts" 68 | ], 69 | "exclude": [ 70 | "node_modules" 71 | ] 72 | } 73 | ``` 74 | 75 | ### 4. Create the Server File 76 | 77 | Create a main server file, for example `server.ts`. 78 | 79 | Add the following basic Express server code to server.ts: 80 | 81 | ```typescript 82 | import express, { Request, Response } from 'express'; 83 | 84 | const app = express(); 85 | 86 | const port = 3000; 87 | 88 | app.get('/', (req: Request, res: Response) => { 89 | res.send('Server is Live!'); 90 | }); 91 | 92 | app.listen(port, () => { 93 | console.log(`Server is running at http://localhost:${port}`); 94 | }); 95 | ``` 96 | 97 | ### 5. Update package.json Scripts 98 | 99 | Modify your `package.json` file to add scripts for starting the server using `tsx` 100 | 101 | ```json 102 | "scripts": { 103 | "start": "tsx server.ts", 104 | "server": "nodemon --exec tsx server.ts", 105 | "build": "tsc" 106 | } 107 | ``` 108 | 109 | ```json 110 | "type": "module" 111 | ``` 112 | 113 | ### 6. Run the Server 114 | 115 | Start your server using the new script: 116 | 117 | ```bash 118 | npm run server 119 | ``` 120 | 121 | You should see the message: Server is running at http://localhost:3000 122 | 123 | Open your web browser and navigate to http://localhost:3000 to see the 124 | 125 | "Server is Live!" message. 126 | -------------------------------------------------------------------------------- /Deploy_MERN_on_VPS.md: -------------------------------------------------------------------------------- 1 | 2 | ## Deploying MERN Stack Project on Hostinger VPS 3 | 4 | 5 | 6 | 7 | - Preparing the VPS Environment 8 | - Setting Up the MongoDB Database 9 | - Deploying the Express and Node.js Backend 10 | - Deploying the React Frontends 11 | - Configuring Nginx as a Reverse Proxy 12 | - Setting Up SSL Certificates 13 | ### 1. Preparing the VPS Environment 14 | 15 | #### Get you VPS Hosting here : [Hostinger VPS](https://greatstack.dev/go/hostinger-vps) 16 | 17 | Log in to Your VPS in Terminal 18 | 19 | ```bash 20 | ssh root@your_vps_ip 21 | ``` 22 | 23 | Update and Upgrade Your System 24 | 25 | ```bash 26 | sudo apt update 27 | ``` 28 | ```bash 29 | sudo apt upgrade -y 30 | ``` 31 | 32 | Install Node.js and npm ( if not pre-installed) 33 | 34 | ```bash 35 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash 36 | ``` 37 | ```bash 38 | \. "$HOME/.nvm/nvm.sh" 39 | ``` 40 | ```bash 41 | nvm install 22 42 | ``` 43 | Install Git 44 | ```bash 45 | sudo apt install -y git 46 | ``` 47 | 48 | 49 | ### 2. Setting Up the MongoDB Database 50 | 51 | If you want to setup MongoDB on VPS Follow this Guide: [click here](https://github.com/GreatStackDev/notes/blob/main/MongoDB_Setup_on_VPS.md) 52 | 53 | ### 3. Deploying the Express and Node.js Backend 54 | 55 | Clone Your Backend Repository 56 | 57 | ```bash 58 | mkdir /var/www 59 | ``` 60 | 61 | ```bash 62 | cd /var/www 63 | ``` 64 | ```bash 65 | git clone https://github.com/yourusername/your-repo.git 66 | ``` 67 | ```bash 68 | cd your-repo/backend 69 | ``` 70 | 71 | Install Dependencies 72 | 73 | ```bash 74 | npm install 75 | ``` 76 | Create .env file & configure Environment Variables 77 | 78 | ```bash 79 | nano .env 80 | ``` 81 | 82 | add environment variables then save and exit (Ctrl + X, then Y and Enter). 83 | 84 | 85 | Installing pm2 to Start Backend 86 | 87 | ```bash 88 | npm install -g pm2 89 | ``` 90 | ```bash 91 | pm2 start server.js --name project-backend 92 | ``` 93 | Start Backend on startup 94 | ```bash 95 | pm2 startup 96 | ``` 97 | ```bash 98 | pm2 save 99 | ``` 100 | Allowing backend port in firewall 101 | 102 | ```bash 103 | sudo ufw status 104 | ``` 105 | If firewall is disable then enable it using 106 | ```bash 107 | sudo ufw enable 108 | ``` 109 | ```bash 110 | sudo ufw allow 'OpenSSH' 111 | ``` 112 | ```bash 113 | sudo ufw allow 4000 114 | ``` 115 | 116 | ### 4. Deploying the React Frontends 117 | 118 | Creating Build of React Applications 119 | ```bash 120 | cd path-to-your-first-react-app 121 | ``` 122 | ```bash 123 | npm install 124 | ``` 125 | If you have ".env" file in your project 126 | 127 | Create .env file and paste the variables 128 | ```bash 129 | nano .env 130 | ``` 131 | Create build of project 132 | ```bash 133 | npm run build 134 | ``` 135 | 136 | Repeat for the second or mulitiple React app. 137 | 138 | Install Nginx 139 | 140 | ```bash 141 | sudo apt install -y nginx 142 | ``` 143 | 144 | adding Nginx in firewall 145 | 146 | ```bash 147 | sudo ufw status 148 | ``` 149 | ```bash 150 | sudo ufw allow 'Nginx Full' 151 | ``` 152 | 153 | 154 | Configure Nginx for React Frontends 155 | 156 | 157 | ```bash 158 | nano /etc/nginx/sites-available/yourdomain1.com.conf 159 | ``` 160 | 161 | ```bash 162 | server { 163 | listen 80; 164 | server_name yourdomain1.com www.yourdomain1.com; 165 | 166 | location / { 167 | root /var/www/your-repo/frontend/dist; 168 | try_files $uri /index.html; 169 | } 170 | } 171 | ``` 172 | Save and exit (Ctrl + X, then Y and Enter). 173 | 174 | Create a similar file for the second or multiple React app. 175 | 176 | ```bash 177 | nano /etc/nginx/sites-available/yourdomain2.com.conf 178 | ``` 179 | 180 | ```bash 181 | server { 182 | listen 80; 183 | server_name yourdomain2.com www.yourdomain2.com; 184 | 185 | location / { 186 | root /var/www/react-app-2/dist; 187 | try_files $uri /index.html; 188 | } 189 | } 190 | ``` 191 | 192 | Create symbolic links to enable the sites. 193 | 194 | ```bash 195 | ln -s /etc/nginx/sites-available/yourdomain1.com.conf /etc/nginx/sites-enabled/ 196 | ``` 197 | 198 | ```bash 199 | ln -s /etc/nginx/sites-available/yourdomain2.com.conf /etc/nginx/sites-enabled/ 200 | ``` 201 | 202 | Test the Nginx configuration for syntax errors. 203 | 204 | ```bash 205 | nginx -t 206 | ``` 207 | 208 | ```bash 209 | systemctl restart nginx 210 | ``` 211 | 212 | ### 5. Configuring Nginx as a Reverse Proxy 213 | 214 | Update Backend Nginx Configuration 215 | 216 | ```bash 217 | nano /etc/nginx/sites-available/api.yourdomain.com.conf 218 | ``` 219 | ```bash 220 | server { 221 | listen 80; 222 | server_name api.yourdomain.com; 223 | 224 | location / { 225 | proxy_pass http://localhost:4000; 226 | proxy_set_header Host $host; 227 | proxy_set_header X-Real-IP $remote_addr; 228 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 229 | proxy_set_header X-Forwarded-Proto $scheme; 230 | } 231 | } 232 | ``` 233 | 234 | Create symbolic links to enable the sites. 235 | 236 | ```bash 237 | ln -s /etc/nginx/sites-available/api.yourdomain.com.conf /etc/nginx/sites-enabled/ 238 | ``` 239 | 240 | Restart nginx 241 | 242 | ```bash 243 | systemctl restart nginx 244 | ``` 245 | 246 | ### Connect Domain Name with Website 247 | 248 | Point all your domain & sub-domain on VPS IP address by adding DNS records in your domain manager 249 | 250 | Now your website will be live on domain name 251 | 252 | ### 6. Setting Up SSL Certificates 253 | 254 | Install Certbot 255 | 256 | ```bash 257 | sudo apt install -y certbot python3-certbot-nginx 258 | ``` 259 | 260 | Obtain SSL Certificates 261 | 262 | ```bash 263 | certbot --nginx -d yourdomain1.com -d www.yourdomain1.com -d yourdomain2.com -d api.yourdomain.com 264 | ``` 265 | 266 | Verify Auto-Renewal 267 | 268 | ```bash 269 | certbot renew --dry-run 270 | ``` 271 | 272 | If you still need help in deployment: 273 | 274 | Contact us on email : greatstackdev@gmail.com 275 | --------------------------------------------------------------------------------