How to set up a Parse Server backend with Typescript.

May, 16 2022

Parse Server is a great way to quickly spin up a backend for your project. Parse is a Node based utility that sits on top of ExpressJS.

It abstracts a lot of the backend code for us so we can spend more time focusing on the front end code.

In combination with Parse, Typescript can really shine when dealing with our routing and database calls.

Let's walk through how to set up a Parse Server project using Typescript.

First, start by cloning the Parse Server Example project in a directory of your choosing.

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

Rename parse-server-example directory to what ever you would like and open the folder in a code editor of your choice.

Install the dependencies:

npm install

Next, install the typescript compiler globally, if not already installed on your local machine.

sudo npm install -g typescript

We also need to install typescript to your project in order to compile the Javascript code on our Elasticbeanstalk instance.

npm install typescript

Install our types for the Parse project.

npm install @types/parse --save

Add a tsconfig.json file to the root directory of your project with the following options:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports" : true,
        "module": "commonjs",
        "esModuleInterop": false,
        "target": "es2016",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": false,
        "outDir": "dist",
        "rootDir": "src",
        "baseUrl": ".",
        "allowJs": true,
        "paths": {
            "*": [
                "node_modules/*",
                "src/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

Make a src folder in the root directory of this project.

Move the entire ./cloud folder into ./src.

Move index.js into the ./src folder.

Notice how this matches the path defined in the rootDir tsconfig options.

Run a tsc command in your terminal (make sure to have typescript installed globally).

If everything works as expected, a ./dist folder should've been generated by the typescript compiler.

Finally, let's add the dist folder to the ./.gitignore file so that we can be sure our code is compiled on the server each time we deploy.

# Typescript
dist

Tell Parse where to find our compiled Typescript code

Open ./package.json and update the start script:

"start": "node ./dist/index.js",

Rename main.js → main.ts and functions.js → functions.ts.

Replace contents of functions.ts with the following. We're just adding the any type to the request parameter for now to shut up our compiler.

Parse.Cloud.define('hello', (req: any) => {
  req.log.info(req);
  return 'Hi';
});

Parse.Cloud.define('asyncFunction', async (req: any) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  req.log.info(req);
  return 'Hi async';
});

Parse.Cloud.beforeSave('Test', () => {
  throw new Parse.Error(9001, 'Saving test objects is not available.');
});

Run another tsc command in your root directory to confirm everything compiles correctly. You should see your ./dist folder filled javascript versions of your main and functions files.

Try starting the server with an npm run start command.

If everything is working as expected, we should see the server start, then error out after ~30 seconds because Parse could not connect to a MongoDB instance.

We will configure the MongoDB Atlas instance in the next section.