Build a web application with Docker, Parse, and Next.js - Part 2: Configuring Parse Server / MongoDB

May 17, 2017

This article is the second in the series whose goal is to create a Docker-based web application. In this article, we will see how to configure Parse Server and MongoDB.

You can read the previous article, Build a web application with Docker, Parse, and Next.js - Part 1: Introduction.

To begin, we will clone and rename the Parse Server example repo.

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

Next, we will create our docker-compose.yml file.

touch docker-compose.yml

Add the following code to the docker-compose.yml file:

version: '2'
services:
  mongo:
    image: mongo:3
    container_name: 'mongo-db'
    volumes:
      - ./mongo/data:/db/data
    ports:
      - '27017:27017'
  api:
    build: ./parse-server
    container_name: 'parse-server'
    ports:
      - '1337:1337'
    environment:
      PORT: 1337
      DATABASE_URI: mongodb://mongo:27017
      APP_ID: 'web-app-docker'
      MASTER_KEY: 'master'
      PARSE_MOUNT: '/parse'
      SERVER_URL: 'http://localhost:1337/parse'
    volumes:
      - ./parse-server/cloud:/parse/cloud
      - ./parse-server/public:/parse/public
    depends_on:
      - mongo

Let's go through this configuration in a little more detail:

  1. We declare our MongoDB service, specify the image we want to use, and define the name the container will use.
image: mongo:3
container_name: 'mongo-db'
  1. Next, we create a volume so we can share the container data on our host machine. The directory will be created at the root of the docker-web-app folder.
volumes:
  - ./mongo/data:/db/data
  1. Finally, we map the container port.
ports:
  - '1337:1337'

Once the MongoDB service has been declared, we then define the Parse Server service. For the MongoDB service, we started directly from the MongoDB image on Docker Hub. For Parse, we will build the image from the Dockerfile.

  1. We indicate the path of the Dockerfile to build and name the container.
build: ./parse-server
container_name: 'parse-server'
  1. We map the container port and define the environment variables.
ports:
  - '1337:1337'
environment:
  PORT: 1337
  DATABASE_URI: mongodb://mongo:27017
  APP_ID: 'web-app-docker'
  MASTER_KEY: 'master'
  PARSE_MOUNT: '/parse'
  SERVER_URL: 'http://localhost:1337/parse'
  • PORT: Parse port (1337 by default)
  • DATABASE_URI: Database URI
  • APP_ID: Application identifier
  • MASTER_KEY: Application master key
  • PARSE_MOUNT: Base route for the API (/parse by default)
  • SERVER_URL: URL of the Parse application that will be used for API calls from Cloud Code.
  1. We create two volumes that will let us edit Parse Cloud Code functions as well as the public folder, which generally contains web pages. We link the mongo-db container to our parse-server container.
volumes:
  - ./parse-server/cloud:/parse/cloud
  - ./parse-server/public:/parse/public
depends_on:
  - mongo

You can now start the services by running the following command:

docker-compose up

Normally, if you go to localhost:1337, you should see the following message displayed:

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

Depending on your environment, you may need to replace localhost with your Docker machine's IP address.

Finally, to verify that data is saved correctly in the database, we will go to the Parse test page (localhost:1337/test). Before following the instructions on the page, you must modify some information located in docker-web-app/parse-server/public/assets/js/script.js.

Replace myAppId with web-app-docker, or with the APP_ID you chose, in the following code:

this.xhttp.setRequestHeader('X-Parse-Application-Id', 'myAppId');

You can then refresh the test page and follow the instructions.

We are done configuring Parse Server and MongoDB. In the next article, we will see how to add Parse Dashboard to this configuration.

Series navigation