Parse Platform as a Backend for React Native, Flutter, and Web apps

Based on Parse Platform, parse-server-starter, and Expo. Use with React Native (Expo), Flutter, Native (iOS & Android), and Web apps.

Each time we start a new project, either it is the next pet project where you want to prove your hypothesis or MVP for the next unicorn startup, we need a good solid backend. Of course, building a dedicated team of backend engineers is a good idea, but it is not our case. We would like to taste something faster with less effort.

It is hard to find a middle ground, however, Backend as a Services (BaaS, MBaaS) are trying to achieve it. There are some great services that are not fully stable (<1.0 version) yet such as Appwrite and Supabase but they are very close to 1.0. And probably the most mature player in BaaS world is the Parse Platform which is going to be used in the article.

TL;DR

We will deploy Parse Platform (Server & Dashboard) with MongoDB on a local machine (available through localhost) using Docker Compose. After doing that, we will create a new entity using the dashboard and check how it works through the Expo app (available in Expo Go).

Deploying Parse Platform

In this section, we are going to configure a new Parse Server with MongoDB on a local machine. API will be exposed through http://localhost:6969/parse/classes/. The dashboard will be available on http://localhost:6969/dashboard/apps/APP_NAME/browser.

Please, open a terminal window, navigate to the desired folder and follow the steps below:

1. Clone parse-server-starter and go to the folder:

> git clone https://github.com/kanzitelli/parse-server-starter.git
> cd parse-server-starter

2. Rename the env file and build the docker-compose.yml:

> mv example.env .env
> sh build.sh

It may take some time.

3. Once installation is done, you can open http://localhost:6969/dashboard in the browser and enter credentials from .env (default username is admin and password is 12345) to see the dashboard and play around with it.

Parse Platform Dashboard

If everything plays nicely with the dashboard, let’s check if Cloud Functions work well. Open the terminal and enter the following curl request:

> curl -X POST -H "X-Parse-Application-Id: APP_ID" -H "Content-Type: application/json" http://localhost:6969/parse/functions/hello

If you see something like {“result”:”hello"}, it means that everything works great! To learn more about Cloud Functions on Parse Platform, please refer to the official documentation and Cloud Functions section of parse-server-starter.

If you are already familiar with the Parse Platform and would like to start working on something else, just go for it! However, if you’d like to see the Parse Platform in action, you might want to proceed to the next section.

Building Expo app with Parse Platform

Before starting to write any code on the frontend side, we have to make sure that our backend is running and we have some data to be served. The first part was done in the previous section and now we are going to add some data.

Let’s say, we want to build a minimalistic app for taking notes. So we will have a list of notes and we should be able to create, delete and edit each note. Open the dashboard, press Create a class button next to the Browser section, and fill in the following information:

Parse Platform Dashboard. Creating a new class.

After creating a new class, you will be navigated to the page related to the created class where you can add new columns and do much more. In our case, we want each note to have title, content, and createdAt fields to show them in the application. As Parse Server creates createdAt field (and others) for newly created classes, we need to add title and content fields by our hands.

Parse Platform Dashboard. Adding new columns for classes.

So now let’s try out a built-in method of adding new rows into a table.

Parse Platform Dashboard. Adding a row with the model.

We should be able to see that our note was added to the table how it is shown in the picture below

Now let’s make sure that the data is available through the API. You will need to open a new terminal window and enter the following:

> curl -X GET -H "X-Parse-Application-Id: APP_ID" -H "Content-Type: application/json" http://localhost:6969/parse/classes/Note

It should print an object with results which contains an array of notes

{"results":[{"objectId":"0Xl79IiiZy","title":"New idea","createdAt":"2021-04-13T17:45:30.604Z","updatedAt":"2021-04-13T17:47:13.723Z","content":"Flippers for birds"}]}

We are done with setting up our class and ready to start writing some frontend code. As stated in the title of the article, you can use this backend setup for any of your web and mobile apps. However, for showcase purposes, I have prepared a small React Native (Expo) application (github, expo link) that is available for anyone through the Expo Go client.

The main idea of this approach is to immediately show Parse Platform functionality. We are going to expose our localhost to the internet with the help of ngrok in order to paste generated link to the Expo app. In order to use ngrok, go to the official website, download the files and follow the steps of getting auth token (it’s free). Once you are done, run the following command being in the same folder where you have unzipped ngrok file:

> ./ngrok http 6969

You should see ngrok dashboard in the terminal window and there should be the forwarding link, like https://6b24440dd58f.ngrok.io. In order to make Parse Platform available through ngrok endpoint, we need to add a new host (with ngrok endpoint) to Traefik config for parse-server service in docker-compose.yml or check the comment on the same line for more details:

parse-server:
  ...
  labels:
    ...
    "traefik.http.routers.api.rule=Host(`localhost`) || HostRegexp(`{[a-z0-9]*}.ngrok.io`)"

After you save the file, run the following command in a terminal window > sh build.sh , wait till it’s done and open https://your_id.ngrok.io/dashboardin the browser

Parse Platform Dashboard through ngrok.

We have an instance of Parse Platform running on localhost and available on the internet through ngrok tunneling. Amazing!

So now we need to get the app and test our backend! In the app, you will see that it prompts you to enter an endpoint of Parse Platform to have access to the instance that is running, in our case, on the local machine. So we will put our https://your_id.ngrok.io/parse (don’t forget about /parse).

• Github — https://github.com/kanzitelli/notes-expo-app (bootstrapped from expo-starter)
• Expo link — https://expo.io/@kanzitelli/projects/notes-expo-app
• Expo Web — https://notes-expo-app.batyr.io/
• Expo QR Code

Notes Expo app’s QR Code

Notes app flow

You can see the result of all changes in the app in the Parse Platform Dashboard.

In the next part, I will cover the use case of deploying the Parse Platform on Digital Ocean droplet with https configured and available through https://server.your-domain.com. Stay tuned!

Github | Twitter | https://batyr.io