Follow these steps to deploy your React frontend and NodeJs backend to Digital Ocean Cloud Hosting

## Create a Droplet


1. Signup to Digital Ocean. Use **[THIS LINK](https://m.do.co/c/90857e82d426)** to get upto $90 referral credit.
2. Once you signup/create account and logged in, click on the button to **Create A Droplet**
3. Go through all the steps, create a password etc then click on create droplet
4. Once the droplet created, you will see the IP address something like this: 12.345.45.678
5. Now you can login to your digital ocean droplet via terminal. All you need is the IP address and the password you created earlier

   ```javascript
   ssh root@12.345.45.678
   ```
6. It will say: Are you sure you want to continue connecting (yes/no/\[fingerprint\])? Type `yes` then hit enter
7. Type the password, then you are logged in to your droplet

## Create NGINX server


 1. Run this command in your terminal to install NGINX in your droplet

    ```javascript
    sudo apt-get install nginx
    ```
 2. It will ask you, After this operation, 8858 kB of additional disk space will be used. Do you want to continue? Type `Y` then hit enter.
 3. No go to the root directory. Always use `cd` to go to root directory from anywhere.

    ```javascript
    cd /etc/nginx/sites-available
    ```
 4. If you want to see what files or folders are in the current directory, use `ls`
 5. Open the `default` file for editing, which is inside `sites-available` folder. We will use `vim` for that.

    ```javascript
    sudo vim default
    ```
 6. To edit this file, press `i` on your keyboard.
 7. Use up/down arrow keys to scroll down until you see the `location` codeblock.
 8. Comment out the existing `location` block or **delete entirely**. To comment out each line, you can type `#` in the beginning of each line. Use arrow keys to navigate.
 9. Now past the below code by replacing your previous `location` block. This assumes that your backend is running in port 8000 and frontend in port 3000. If that’s not the case, make sure to make them.

    ```javascript
    location /api {
            proxy_pass http://localhost:8000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    
    location /{
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    ```
10. In the above code, we are running our api in `/api` prefixed by your domain name.
11. Now to save the changes and exit, press `ESC` key in keyboard then type `:` followed by `wq` then hit enter.
12. Always remember these shortcuts. To edit file using vim run `sudo vim filename`. To edit press `i`. To save the changes and exit press `ESC` followed by typing `:wq`
13. Now make sure there are no no typos by running this command

    ```javascript
    sudo nginx -t
    ```
14. Restart NGINX to apply those changes

    ```javascript
    sudo systemctl restart nginx
    ```
15. You should see success message like this

    ```javascript
    nginx: configuration file /etc/nginx/nginx.conf test is successful
    ```
16. Great we are done with server setup.

## Push code to Github


1. **Create 2 different repository** for your backend and frontend in Github. Then push your code from your computer to Github. Don’t forget to include `node_modules` and `config/env` files in `.gitignore`. If using **Next.js**, make sure to also include .next in `.gitignore`
2. If for some reason, if you already made git commit but no added new files to `.gitignore`, that will not work. Better manually delete the hidden `.git` file and make fresh git commit.
3. If you don’t want your code to be public, click **Private** to create private repository.
4. The commands you will be using are the following from within your project folder

   ```javascript
   git init
   git add .
   git commit -m "deploying"
   git branch -M main
   git remote add origin https://github.com/kaloraat/YOUR_GIT_REPO_NAME.git
   git push -u origin main
   ```
5. Repeat the same process for both your backend and frontend projects.

## Pull code from Github to Digital Ocean Droplet


1. In your droplet (via terminal), go to root directory

   ```javascript
   cd
   ```
2. Now you are in the root directory of your droplet.
3. Clone your both projects from Github (backend and frontend)
4. The clone url is same as your repository url followed by `.git`
5. To clone your backend, run this code in your terminal (replace name according to yours). The last word is the name of your project folder. You can call anything your like or leave empty to use default Github name  (YOUR_GIT_REPO_NAME_CLIENT). This process will require you to enter your Github username(email) and password.

   ```javascript
   sudo git clone https://github.com/kaloraat/YOUR_GIT_REPO_NAME_CLIENT.git client
   ```
6. Repeat the same process for your other project (either backend or frontend)
7. Now to see your both cloned projects type `ls`
8. You should see your both projects `client` and `server`

## Create `.env` or `config` files in production

If your project had `.env` or config files that were added to `.gitignore`, it’s time to create them in your project folders in digital ocean droplet.

In your droplet you can always use `ls` to list all files or `ll` to list all files including hidden files.

\

1. Create `.env` file inside your server folder

   ```javascript
   cd server
   sudo vim .env
   i
   ```
2. Now you can type or copy paste all the env variables for production use.
3. Now save and exit. `ESC` + `:wq`
4. Repeat the same process for your other project (either backend or frontend)
5. For your frontend `.env` file, if you are using API url, update that by replacing localhost to your IP

   ```javascript
   API="http://12.345.45.678/api";
   ```
6. Once you have created `.env` for both your projects, we can start installing packages from `npm` and run our projects. It should be live on the IP address until we add a domain name.

## Install latest version of NodeJs using `nvm`

Our projects are ready but we still haven’t installed NodeJS yet. To install the latest version or any version of your choice, you can use nvm (node version manager). So let’s use nvm to install the latest version of Node. Run the following lines of code one by one.

```javascript
cd
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
```

To see the list of node version available to install, run this command:

```javascript
nvm list-remote
```

To use a specific version you can do the following. This is to install version `16.13.1`

```javascript
nvm install v16.13.1
npm use v16.13.1
```

## Running React frontend


1. In production we will not be using `nodemon`. Instead we will be using `pm2` to continuously run our servers.
2. Run the following command to install pm2 globally.

   ```javascript
   npm i -g pm2
   ```
3. Now from inside `client` folder, you need to run

   ```javascript
   npm install
   ```
4. Now create a production build

   ```javascript
   npm run build
   ```
5. Now run your project

   ```javascript
   pm2 start npm -- start
   ```
6. Now visit the IP address in the browser which should look something like this: http://12.345.45.678/  Your frontend should be running.
7. If you page requires the data from backend, then you may not see anything on the page because we are not running our server/API yet.

## Running Node backend

If you are not using Mongo Atlas, scroll down to Installing MongoDB section.

If you are using Mongo Atlas URI connection string, then you are good to go. Just run this command from inside server folder. This is assuming you have `server.js` entry point, if it’s something else for example `index.js` then use that name instead.

```javascript
npm install
pm2 start server.js
```

Now you can visit any public API endpoint of your server. For example http://12.345.45.678/api/blogs. You should see the json response. Also your frontend should be showing the data received from the backend.

## Troubleshooting


1. If you have build issues, have a look at your node version. Make sure you are using same version in your computer and in production (digital ocean droplet)

   ```javascript
   node -v
   ```
2. For build issues, installation issues, always look at the error messages. Most of the time they write a possible solution there. You can also try removing node_modules and re-install.

   ```javascript
   rm -rf node_modules package-lock.json
   ```
3. For debugging, you can use `npm start` instead of pm2 so that you can see the errors in server console. This is only for debugging. Once you exit terminal your app will not run unless you are using `pm2`.
4. And obviously there is google to search the solutions to your issues. Stackoverflow, Github will probably have a solution of any issues you may come across. Also checkout digital ocean blog articles for things like how to install NodeJs in digital ocean etc.

## Most used `pm2` commands


1. To start backend

   ```javascript
   pm2 start server.js
   ```
2. To start frontend

   ```javascript
   pm2 start npm -- start
   ```
3. To restart all running process after you make git pull request (after some code change/updates) and ran `npm run build`

   ```javascript
   pm2 restart all
   ```
4. To kill the running process

   ```javascript
   pm2 kill
   ```

## Installing MongoDB

If you want to use local installation of MongoDB, first you need to install it. Run these commands line by line. These steps are taken from the [digital ocean tutorial](https://www.digitalocean.com/community/tutorials/how-to-install-mongodb-on-ubuntu-18-04-source)

```javascript
curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
apt-key list
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
sudo apt update
sudo apt install mongodb-org
sudo systemctl start mongod.service
sudo systemctl status mongod
```

If you see errors or the status is not active, you may need to change the permission settings. Run these commands line by line

```javascript
chown -R mongodb:mongodb /var/lib/mongodb
chown mongodb:mongodb /tmp/mongodb-27017.sock
```

Now when you run `sudo systemctl status mongod` you should see Mongodb service active (running)

\
Now you can run mongodb terminal commands to create new database. Whatever name is used in your project’s mongodb connection uri, use the same name to create a database. For example if your .env file mongodb connection string is like this:

```javascript
mongodb://localhost:27017/mydatabase
```

Then you will need to create a database by the name of `mydatabase`

```javascript
mongo
show dbs
use mydatabase
```

To exit press `control` + `c`

Now run your server

```javascript
cd
cd server
pm2 start server.js
```

Now  you can visit your api that may look something like this http://12.345.45.678/api/blogs

If your client is not running, do this

```javascript
pm2 start npm -- start
```

## Updating user role manually in Mongodb

If you need to make some updates to your mongodb manually, for example making user admin by changing his role, you can run those terminal commands

```javascript
mongo
show dbs
use mydatabase
show collections
db.users.find().pretty();
db.users.update({_id: ObjectId("123456789123456789")}, {$set: {role: 1}});
db.users.find().pretty();
```

## Get free SSL certificate

Cloudflare CDN service also provides free SSL. If you want to use that skip to the next section below.

For this you need to have a domain name and you have added that domain name in your digital ocean. You can do this by going to digital ocean dashboard. On top you will see a button called **Create**, click on that dropdown button and click Domains/DNS. [Read this detailed tutorial](https://codecontinue.com/article/add-domain-to-digital-ocean-droplet) if you need help.

\
To secure your site with `https`, you can use free SSL in digital ocean using **Let’s Encrypt**. Run the following commands line by line from within the root directory of your droplet.

```javascript
sudo apt install certbot python3-certbot-nginx
cd /etc/nginx/sites-available
sudo vim default
```

\
Find the line that has `server_name _;` Then change that to the following

```javascript
server_name yourwebsite.com www.yourwebsite.com;
```

Now save the file and exit. `ESC` + `:wq `

Run these commands to restart NGINX

```javascript
sudo nginx -t
sudo systemctl reload nginx
```

Allow HTTPS through firewall

```javascript
sudo ufw status
```

You will see **inactive**

Do this to enable

```javascript
sudo ufw enable
```

Allow https and ssh

```javascript
sudo ufw allow 'Nginx Full' 
sudo ufw allow 'OpenSSH'
```

Check ufb status

```javascript
sudo ufw status
```

Obtain SSL certificate

```javascript
sudo certbot --nginx -d yourwebsite.com -d www.yourwebsite.com
```

Accept the prompts with `y`

\
That’s all. Now you website is served on https.

\


Deploy React Node App to Digital Ocean

Fullstack JavaScript React Node Courses on Udemy