How to Deploy Parse Server, Parse Dashboard and React App on Digital Ocean 2021
Tags: parse, digitalocean, baas, hosting
Published: 2020-12-30 16:58:10

Parse is an open-source Backend as a Service (BaaS) platform commonly used over the last few years. Using such a platform gives you the freedom to choose where and how to deploy it, except that there is no updated documentation on how to do that on [Digital Ocean](https://www.digitalocean.com/community/tutorial_series/how-to-host-parse-server) 🤔. Search no more, as in this tutorial I will show you step by step how to achieve such a goal 🥳, and run your server and web application for $5/mo 🎉.

# Configure Digital Ocean Account

Digital Ocean is a versatile cloud service that allows you to deploy your applications at a reasonable price. Use this [link](https://m.do.co/c/65ea7011faf9) to get $100 in credit over 60 days on your account.

I use [Putty](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html) in this tutorial to connect to my droplet. You just need [putty](https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe) as the SSH and Telnet client, and [puttygen](https://the.earth.li/~sgtatham/putty/latest/w64/puttygen.exe) as a RSA and DSA key generation utility.

# Create a Droplet

For this tutorial, I chose a Basic Droplet $5/mo with an Ubuntu 20.04(LTS)x64. You can select a different plan if you want. You can always upgrade if you need more resources. Select the region that is closer to your location. Now, for the **Authentication** I chose SSH keys. Use Putty Gen to create your SSH Public and Private keys if you don't have any.

# Configure Networking and Domain

Go to **Floating IPs** under **Networking**, and create a floating ip that points to your droplet. If for some reason you need to change your droplet, you won't have to go modify the configuration of your domain. Once this is done, go to **Domains** always under **Networking**, and add your domain name. For this tutorial, I am using *autodidaktum.tk*. In case you don't have any domain name available, you can get one for free at [Freenom](freenom.com).

Create these four records:

- Type *A* Host *@* Resource *floating ip address*
- Type *A* Host *www* Resource *floating ip address*
- Type *A* Host *api* Resource *floating ip address* (We will use this one for the Parse Server)
- Type *A* Host *dashboard* Resource *floating ip address* (We will use this one for the Parse Server Dashboard)

Go to your domain provider, check for the option to configure *custom nameservers*. Add the following entries:

- ns1.digitalocean.com
- ns2.digitalocean.com
- ns3.digitalocean.com

# Install MongoDB

Enter on your droplet using Putty and run:

```
apt-get update -y
```

Now install MongoDB server:

```
apt-get install mongodb-server -y
```

You can check if the installation was successful by running:

```
systemctl status mongodb
``` 

# Install Parse Server

First, install Node and Yarn on your server:

```
curl -sL https://deb.nodesource.com/setup_12.x | bash -
apt-get install nodejs -y
npm install -g yarn
```

You can check Node version with the command ``node --version``. For this tutorial, I am using v12.20.0.

Create a directory called *parse-server* under */opt*, and then clone the Parse Server example repository under that directory:

```
git clone https://github.com/parse-community/parse-server-example.git .
```

Run `npm install` to install all dependencies. Once it is done, run `npm index.js` to start the server.

Go to your browser in your machine, and enter *{ip floating address}:1337*. You should see the entry:

*I dream of being a website. Please star the parse-server repo on GitHub!*

# Install Parse Dashboard

You can install the Parse Dashboard with the command:

```
npm install -g parse-dashboard
```

Create a directory called *parse-dashboard* under */opt*, and then under that directory create with *nano* 💖🤢 a file called *parse-dashboard-config.json* (``nano parse-dashboard-config.json``). Add the following content to that file:

```
{
 "apps": [
   {
      "serverURL":"http://{floating-ip-address}:1337/parse",
      "appId":"yourAPIid",
      "masterKey":"yourMasterKey",
      "appName":"yourAppName"
   },
   {
       "user":"username",
       "password":"password"
   }
  ]
}
```

Now run ``parse-dashboard --config /opt/parse-dashboard/parse-dashboard-config.json``. Go to your browser in your machine, and enter *{ip floating address}:4040*. You should see the login window for the Parse Dashboard.

Ensure that your API ID and Master Key are the same under this configuration file and the one at *index.js* under the Parse Server.

# Configure Reverse Proxy with NGINX

[NGINX](https://www.nginx.com/) (pronounced **engine x**) is an application platform load balancer, application microservices, and many more. Install the tool on your server with the command

```
apt install nginx
```
Now let's configure our reverse proxy. Let's use nano once more `nano /etc/nginx/sites-available/{your-domain-name}` and copy the following content

```
server {
    listen 80;
    listen [::]:80;
    root /var/www/{your-domain-name}/html;
    index index.html index.htm index.nginx-debian.html;

    server_name {your-domain-name} www.{your-domain-name};

    location / {
        try_files $uri $uri/ =404;
    }
}

server {
    server_name api.{your-domain-name};

    location / {
        proxy_pass http://localhost:1337/;
    }
}

server {
     server_name dashboard.{your-domain-name};

     location / {
         proxy_pass http://localhost:4040/;
     }
}

```

Create a soft link:

```
ln -s /etc/nginx/sites-available/autodidaktum.tk /etc/nginx/sites-enabled/
```

Check that everything was properly configured `nginx -t` and restart the service `systemctl restart nginx`

# Configure your SSL Certificates

I used Certbot to configure my SSL certificates for free. Let's install it first:

```
add-apt-repository ppa:certbot/certbot
apt-get update
apt-get install python3-certbot-nginx
```

Once install, run `certbot --nginx` and follow the instructions to install all SLL certificates.

Remember to update under your *parse-dashboard-config.json* the right URL for the Parse Server. It should be something like *https://api.{your-domain-name}/parse*.

These certificates are valid for 90 days. You can run this test the renewal with:

```
certbot renew --dry-run
```

# Run Parse Server and Parse Dashboard by Default

The final step is to ensure that both the Parse Server and Parse Dashboard runs automatically even if the server reboots. First, let's install pm2

```
npm install pm2 -g
```

Under */opt/parse-server/* run the commands:

````
pm2 start index.js
pm2 startup ubuntu
```

This will allow us to run automatically the Parse Server.

For the Parse Dashboard, we just need a simple script `nano /etc/systemd/system/parse-dashboard.service` with this content:

```
[Service]
ExecStart=/usr/bin/parse-dashboard --config /opt/parse-dashboard/parse-dashboard-config.json

[Install]
WantedBy=multi-user.target
```

Run the command:

```
systemctl start parse-dashboard.service
systemctl enable parse-dashboard.service
```

# Final Touch

For security reasons, you should enable a firewall that allows only access to your server through SSH, HTTP, and HTTPS. It is a good practice to disable the port access:

```
ufw enable
ufw allow ssh
ufw allow http
ufw allow https
```

Finally, you can also run your front-end application on the same server. To do so, add the following entries under the */etc/nginx/sites-available/{your-domain-name}*:

```
location / {
        # reverse proxy for next server
        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;

        # we need to remove this 404 handling
        # try_files $uri $uri/ =404;
    }
```

Congratulations, you managed to set up your Parse Server and Dashboard under a Digital Ocean Droplet. Please share if you like, and don't hesitate to leave any comments below. Have a good one!