DEV Community: Eric Pietrowicz

How to deploy a Typescript Parse Server on Elasticbeanstalk

Eric Pietrowicz — Thu, 01 Dec 2022 14:03:43 +0000

Originally posted on ubiqueIoT

Now that we have our Typescript Parse Server compiling and connecting to our MonoDB database, let's get it deployed to Elasticbeanstalk.

Download and install the Elasticbeanstalk CLI and the AWS CLI.

Run aws configure to sign in to your account with the CLI.

Log into AWS console and create a new elastic beanstalk instance.

Choose web server environment.

Give your new application a name:

It is helpful here to choose a specific domain rather than letting it auto generate so that we can update our Parse config. Take note of the domain that you give your instance.

Choose a Node16 environment with the default settings:

Allow the instance to be created with a sample application and click create environment.

While your environment is deploying, navigate to ./.ebextensions/app.config of your Parse Server project and update the SERVER_URL property with the domain you specified.

For example:

SERVER_URL: "http://parseservertutorial1.us-east-1.elasticbeanstalk.com/parse"

The ./.ebextensions/app.config file contains all of the environment variables that our Elasticbeanstalk instance will be deployed with.

Here you can add the APP_ID and MASTER_KEY that you want to use for production.

Note that this file should not be checked into git to keep these keys secure.

We can also update the DATABASE_URI environment variable. You can then remove it from ./src/index.js so that we keep our connection string secure.

Configuring the Elasticbeanstalk Environment

After the sample code is deployed, we'll need to change the instance type to t2.small.

❗️ This is critical, otherwise the npm install command will fail on the server. t2.micro is too small of an instance for Parse Server.

In the side panel of your Elasticbeanstalk console, choose the configuration option.

Scroll down until you find the capacity section and choose Edit.

Find the 'instance types' section and remove t2.micro while keeping t2.small or larger.

Initialize our Parse Server as an Elasticbeanstalk instance

In the project's terminal run:

eb init

Answer the prompts by selecting the specified region and project name of our new instance when prompted.

Make sure to choose n when asked if you wish to continue with CodeCommit (assuming you are using Github).

Note that eb init will update our .gitignore file automatically for us.

Next, we need to make sure that our compiled javascript gets deployed and not our typescript.

In your root directory, create a new folder called ./scripts/

Add a file named ./scripts/dist.sh and fill it with the following shell command:

# If the directory, `dist`, doesn't exist, create `dist`
stat dist || mkdir dist
# Archive artifacts
zip dist/$npm_package_name.zip -r dist package.json package-lock.json .ebextensions

Next, move on over to your package.json file and add two new scripts:

    "dist": "sh ./scripts/dist.sh",
    "build": "tsc"

Test them out by first running npm run build and then running npm run dist.

You can confirm that everything is working by confirming there's a new .zip file in your ./dist folder.

Now we'll need to tell the Elasticbeanstalk CLI which zip to upload. Head on over to the ./elasticbeanstalk/config.yml file that was generated with the eb init command.

Add a new stage called deploy at the very bottom:

branch-defaults:
  master:
    environment: Parseservertutorial1-env
environment-defaults:
  Parseservertutorial1-env:
    branch: null
    repository: null
global:
  application_name: parse-server-tutorial-1
  default_ec2_keyname: null
  default_platform: Node.js 16 running on 64bit Amazon Linux 2
  default_region: us-east-1
  include_git_submodules: true
  instance_profile: null
  platform_name: null
  platform_version: null
  profile: null
  sc: git
  workspace_type: Application
# New!
# Replace the "parse-server-example" with the name of your zip file
deploy:
  artifact: dist/parse-server-example.zip

Let's try to deploy and cross our fingers.

But first make sure to commit your changes, otherwise the elasticbeanstalk CLI will not pick them up.

git add .
git commit -m "inital commit"
eb deploy

Once the deployment completes, you can test that your Parse Server is running as expected by running the following command:

curl --location --request POST 'http://<your domain here>/parse/functions/hello' \
--header 'X-Parse-Application-Id: <your app id here>' \

You should get a response from your ./cloud/functions.ts file with a body of: Hi.

Now you have your Typescript Parse Server running on your Elasticbeanstalk environment!

Remember to set up VPC peering to secure your database connection!

How Configure a MongoDB Atlas Database for your Parse Server

Eric Pietrowicz — Thu, 01 Dec 2022 13:58:14 +0000

Originally posted on ubiqueIoT

In the previous post we set up a Typescript Parse Server instance. Now, let's get our server connected to a MongoDB Atlas instance.

First, create a Mongo Atlas account and login and create a new project.

Add a database to your project by choosing the Build a Database option in your new project.

Accept all of the defaults avoiding any paid tiers for now.

Next, we'll need to add a new user that will be used to connect to the db. Keep note of your user account information, this will be used in our Parse code to connect to this instance.

Choose the Add My Current IP Address button so that your current IP address can connect locally to your database.

Once back in the main menu of your project, choose the connect option

Connect using mongodb native drivers

Copy the connection string

Paste the connection string to your index.js file under your databaseURI config:

databaseURI: 'mongodb+srv://<replace-with-username-(no-brackets)>:<replace-with-password-(no-brackets)>@cluster0.bh3ah.mongodb.net/?retryWrites=true&w=majority'

Finally, go back to MongoDB Atlas and update the network access settings so that our ElasticBeanstalk instance can connect.

❗️ Please treat this as a temporary solution. When you go to production, you will need to set up a secure VPC connection between ElasticBeanstalk and MongoDB.

This is a great guide on how to configure VPC peering.

There are some valuable notes in this guide as well.

Let's run our Parse Server locally to make sure it can connect to the Mongo instance.

In your Parse project run npm run start and confirm that your server does not time out. It should now be connected to your database.

How to set up a Parse Server backend with Typescript

Eric Pietrowicz — Thu, 01 Dec 2022 13:49:14 +0000

Originally posted on ubiqueIoT

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 a future post.