DEV Community

loading...
Cover image for How to Deploy Parse Server, Parse Dashboard and React App on Digital Ocean 2021

How to Deploy Parse Server, Parse Dashboard and React App on Digital Ocean 2021

Autodidaktum
Autodidaktum is a platform that provides online learning content that will help you to improve and advance your career
・5 min read

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 🤔. 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 to get $100 in credit over 60 days on your account.

I use Putty in this tutorial to connect to my droplet. You just need putty as the SSH and Telnet client, and puttygen 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.

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
Enter fullscreen mode Exit fullscreen mode

Now install MongoDB server:

apt-get install mongodb-server -y
Enter fullscreen mode Exit fullscreen mode

You can check if the installation was successful by running:

systemctl status mongodb
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
   }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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 (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
Enter fullscreen mode Exit fullscreen mode

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/;
     }
}

Enter fullscreen mode Exit fullscreen mode

Create a soft link:

ln -s /etc/nginx/sites-available/autodidaktum.tk /etc/nginx/sites-enabled/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

pm2 start index.js
pm2 startup ubuntu
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Run the command:

systemctl start parse-dashboard.service
systemctl enable parse-dashboard.service
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (6)

Collapse
rasharm_ profile image
Raman Sharma

Do people still use Parse?

Collapse
autodidaktum profile image
Autodidaktum Author

Parse still very popular these days. The platform keeps under maintenance by a wide community. Maybe it's not as popular as Firebase or AWS Amplify, but it is definitely worth to try. Once you start using it, you will realize how powerful it is and the advantages that you will have over a similar kind of platform

Collapse
rasharm_ profile image
Raman Sharma

Maybe time to create a marketplace image for DigitalOcean?

marketplace.digitalocean.com/

Thread Thread
autodidaktum profile image
Autodidaktum Author

True, I didn't think about it 😅. I'll work on a clean installation that contains everything properly configured

Thread Thread
rasharm_ profile image
Raman Sharma

Please feel free to ping if you need any help.

Collapse
acidguyx profile image
acidguyx

hi i followed all the steps and finally it says

"You don't have any apps" in the dashboard, can you pls help me with this? thanks.

Forem Open with the Forem app