Forem: Autodidaktum

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

Autodidaktum — Wed, 30 Dec 2020 16:58:10 +0000

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

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 (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!

Can you reduce your time to market using Parse Server as BaaS?

Autodidaktum — Fri, 27 Nov 2020 18:16:18 +0000

Backend as a Service (BaaS) is a cloud-based solution to provide the backend processes in the best possible way. With a BaaS, you can connect your web and mobile applications to the pre-written cloud-based services. These can help in connecting applications to backend processes such as cloud storage, authentication, etc.

I see Parse as a good alternative for Firebase or AWS Amplify, as I am always afraid to end up broke on a one single mistake.

Also, when I see the possibility to deploy a server on Digital Ocean for $5 a month, I just think that this is a no-brainer option.

However, I tend to believe that Parse is not so popular nowadays, so I'm curious to hear from you if you still using Parse, and what was your experience with it?

How to Setup Google OAuth2 Login with Parse Server in React

Autodidaktum — Mon, 23 Nov 2020 20:50:23 +0000

I recently started to use Parse Server, and while checking the documentation I struggle to find out a direct way to configure my Parse application in a way to perform Google OAuth2. I decided to dig-in into the subject and consolidate a tutorial that explains step by step how to achieve that task.

According to Parse documentation, "Parse allows you to link your users with 3rd party authentication, enabling your users to sign up or log into your application using their existing identities. This is accomplished through linkWith method by providing authentication data for the service you wish to link to a user in the authData field. Once your user is associated with a service, the authData for the service will be stored with the user and is retrievable by logging in." To perform the user authentication, you can use the following method:

const user = new Parse.User();
await user.linkWith('google', { authData: myAuthData });

The problem is, where shall we retrieve the Authentication Data? In this tutorial, we will find out.

If you just want to look at the code, a sample project is available on GitHub. A sample application is also hosted at Back4App.

Configure Google Client Identifier

Log into your Google Developer account and go to Credentials. Click Create credentials and choose OAuth client ID

Pick the platform you will need. For this example, I am using Javascript (Web Application), but you should pick the one you will be using. Define your Authorized JavaScript origins, and Authorized redirect URIs. Afterwards, you should receive your Client ID and Secret.

Create Parse Cloud Code

Retrieve Client ID and Client Secret

Once you create your client ID and client secret, store those values as environment variables inside your Parse Server Application. You can find those under Server Settings -> Environment Variables

Create a package.json file, and add the googleapi dependencies:

{ 
    "dependencies": {
        "googleapis": "^61.0.0"
    }
}

Now create the Parse Cloud Code to start the authentication with Google. This method will return an url where the user can login with a Google Account:

Parse.Cloud.define("GoogleSignIn", async (request) => {
  const google = require("googleapis").google;
  // Google's OAuth2 client
  const OAuth2 = google.auth.OAuth2;

  // Create an OAuth2 client object from the credentials in our config file
  const oauth2Client = new OAuth2(
    process.env.client_id,
    process.env.client_secret,
    process.env.redirect_uris
  );
  // Obtain the google login link to which we'll send our users to give us access
  const loginLink = oauth2Client.generateAuthUrl({
    // Indicates that we need to be able to access data continously without the user constantly giving us consent
    access_type: "offline",
    // Using the access scopes from our config file
    scope: ["email", "openid", "profile"],
  });
  return loginLink;
});

Retrieve User Info and Access Token

You need a second Parse Cloud Code in order to handle redirecting from the Google Authentication. This function will return some user information, the ID Token and Access Token, which later you can use in your Parse Application:

Parse.Cloud.define("GoogleToken", async (request) => {
  const google = require("googleapis").google;

  // Google's OAuth2 client
  const OAuth2 = google.auth.OAuth2;

  // Create an OAuth2 client object from the credentials in our config file
  const oauth2Client = new OAuth2(
    process.env.client_id,
    process.env.client_secret,
    process.env.redirect_uris
  );

  if (request.error) {
    // The user did not give us permission.
    return request.error;
  } else {
    try {
      const { tokens } = await oauth2Client.getToken(request.params.code);
      oauth2Client.setCredentials(tokens);
      var oauth2 = google.oauth2({
        auth: oauth2Client,
        version: "v2",
      });
      const usr_info = await oauth2.userinfo.get();
      // Auth data for Parse
      const authData = {
        id: usr_info.data.id,
        email: usr_info.data.email,
        name: usr_info.data.name,
        id_token: tokens.id_token,
        access_token: tokens.access_token,
      };
      return authData;
    } catch (error) {
      return error;
    }
  }
});

Deploy your Cloud Code in your Parse Server.

Create React Application

Let's create a React application, and install the following dependencies:

react-bootstrap
bootstrap
parse
react-router-dom
redux
react-redux
redux-devtools-extension
redux-thunk

Initialize Parse Server

Use Parse.Initialize method to set up the authentication token, connecting your page with Parse Server. Go to the App.js file and add the following entry:

import Parse from 'parse'

Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);
Parse.serverURL = SERVER_URL;

The Application ID and JavaScript Key under App Settings -> Security & Keys.

Add Redux Store Boilerplate

The application uses Redux in order to easily handle User Authenticate state across different pages. Create a folder redux, and inside a file named store.js. Then, add the necessary boilerplate for the store:

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";

import rootReducer from "./reducers";

const initialState = {};
const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Add another folder inside redux called reducers, and create a file index.js. Then, add the necessary code to configure your root reducer

import { combineReducers } from "redux";

export default combineReducers({});

Finally, go back to App.js and add the Store Provider. At the end, App.js should look like this

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import * as Env from "./environment";

import { Provider } from "react-redux";

import Routes from "./routers/Routes";
import store from "./redux/store";

import Parse from "parse";

Parse.initialize(Env.APPLICATION_ID, Env.JAVASCRIPT_KEY);
Parse.serverURL = Env.SERVER_URL;

function App() {
  return (
    <Provider store={store}>
      <Routes />
    </Provider>
  );
}

export default App;

Create Reducer and Action for Authentication

Now, under redux folder let's create another one called actions, and inside a file called auth.js and types.js. Inside types.js, let's add two entries

export const REDIRECT_SUCCESS = "REDIRECT_SUCCESS";
export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const AUTH_ERROR = "AUTH_ERROR";

Under auth.js, let's define the actions to handle the Google Sign Up:

import Parse from "parse";

import { REDIRECT_SUCCESS, LOGIN_SUCCESS, AUTH_ERROR } from "./types";

export const loginGoogle = () => async (dispatch) => {
  try {
    const res = await Parse.Cloud.run("GoogleSignIn");
    dispatch({
      type: REDIRECT_SUCCESS,
      payload: res,
    });
  } catch (error) {
    if (error) {
      dispatch({
        type: AUTH_ERROR,
        payload: error,
      });
    }
  }
};

export const getTokenGoogle = (params) => async (dispatch) => {
  try {
    // Get the Authentication Data
    const res = await Parse.Cloud.run('GoogleToken', params);
    const user = new Parse.User();
    const authData = {
      'id': res.id,
      'access_token': res.access_token,
    };

    await user.linkWith('google', { authData });
    user.set('username', res.name);
    user.set('email', res.email);
    await user.save();
    dispatch({
      type: LOGIN_SUCCESS,
    });
  } catch (error) {
    if (error) {
      dispatch({
        type: AUTH_ERROR,
        payload: error,
      });
    }
  }
};

Now, let's create our auth reducer. Here we define how the store will keep the User Information and Authentication Data:

import { REDIRECT_SUCCESS, LOGIN_SUCCESS, AUTH_ERROR } from "../actions/types";

const initialState = {
  isAuthenticated: null,
  oauth: null,
  errors: [],
};

export default function (state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case REDIRECT_SUCCESS:
      return {
        ...state,
        oauth: payload,
      };
    case LOGIN_SUCCESS:
      return {
        ...state,
        isAuthenticated: true,
      };
    case AUTH_ERROR:
      return {
        ...state,
        errors: payload,
      };
    default:
      return state;
  }
}

Don't forget to include your auth reducer in your combine reducer at index.js

import { combineReducers } from "redux";
import auth from "./auth";

export default combineReducers({
  auth,
});

Create Login Page

Create a new folder called pages, and inside a file named Home.js. Then, build a Form to allow the User to log in. We'll call the action loginWithGoogle, when the user presses the Sign In with Google button. We will redirect to the link provided by Google:

import React, { Fragment, useState } from "react";
import { Form, Button } from "react-bootstrap";

import { connect } from "react-redux";
import PropTypes from "prop-types";

import { loginGoogle } from "../redux/actions/auth";

const Home = ({ loginGoogle, oauth }) => {
  const handleGoogleSignIn = () => {
    loginGoogle();
  };

  if (oauth) {
    window.location.href = oauth;
  }

  return (
    <Fragment>
      <div className='container'>
        <div className='display-1 text-primary mb-3 text-center'>
          Login Page
        </div>
        <div className='row align-items-center justify-content-center'>
          <div className='col-6'>
            <Form>
              <Form.Group>
                <Form.Control
                  type='email'
                  name='email'
                  placeholder='Email'
                  className='my-2'
                ></Form.Control>
                <Form.Control
                  type='password'
                  name='password'
                  placeholder='Password'
                  className='my-2'
                ></Form.Control>
              </Form.Group>
              <Button className='btn-block mb-3'>Login</Button>
            </Form>
            <Button
              className='btn-danger btn-block'
              onClick={handleGoogleSignIn}
            >
              Sign In with Google
            </Button>
          </div>
        </div>
      </div>
    </Fragment>
  );
};

Home.propTypes = {
  loginGoogle: PropTypes.func.isRequired,
  oauth: PropTypes.string,
};

const mapStateToProps = (state) => ({
  oauth: state.auth.oauth,
});

export default connect(mapStateToProps, { loginGoogle })(Home);

Create Redirect Page

Now it is time to try the application. Once you hit the Sign in with Google button, you will be redirected to the Google Sign In Page. Select an account, then you will see how the application is redirected to the Redirect page. If the authentication goes smoothly, you should see the User page. You can verify in your Parse application that the user is added with the respective authData. A session is also created for that user.

Congratulations, you managed to set up the Google OAuth2 with your Parser Server using a React Application. Please share if you like, and don't hesitate to leave any comments below. Have a good one!