Skip to content

Deployment

Dinith edited this page May 24, 2020 · 5 revisions

https://metrinom.herokuapp.com/

Why the app was deployed

There were several reasons as to why we decided to deploy the app, rather than requiring cloning the repo/running teh server and client manually:

  • We wanted to keep using the app beyond the timeframe of the project, as we found it incredibly interesting and useful
  • We didn't want users to have to manually clone/run the code
  • We wanted the SOFTENG750 markers to have an easy way to assess the functionality of the app without having to clone/run
  • We wanted to share our app with others who don't have a technical/coding background

How the app was deployed

The task of deploying this application was quite a cumbersome one. This is because the repository is considered to be a "monorepo" which means it is a single repository which contains many projects, in our project we had 2 smaller projects namely client and server. Heroku is a tool which allows this deployment.

In order to deploy these repos, 2 seperate git remotes were setup on the repository (one for the backend, one for the frontend):

heroku create metrinom-api --remote metrinom-api
heroku create metrinom --remote metrinom

Here is how the remotes look on terminal: Screen Shot 2020-05-24 at 9 05 21 PM

After this a script was added into each of the package.json files in the server and client folder:

Server package.json

"scripts": {
        "start": "nodemon ./src/index.js",
        "test": "jest",
        "publish-api": "cd ../ && git subtree push --prefix server metrinom-api master"
}

Client package.json

"scripts": {
        "start": "npm run watch:css && react-scripts start",
        "build": "npm run build:css && react-scripts build",
        "test": "jest --silent",
        "eject": "react-scripts eject",
        "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
        "watch:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
        "publish-client": "cd ../ && git subtree push --prefix client metrinom master"
}

We see that the publish-api and publish-client scripts have been added respectively. To deploy the application we then have to cd into either the client or server (whichever one to deploy) and run npm run-script publish-api (in this case to deploy the api).

The command then only pushes the subtree of the directory. For example git subtree push --prefix server metrinom-api master means take only the server folder and push it to the master branch of the metrinom-api remote. Similarly this is done for the client hence solving the problem of deploying monorepos.

Clone this wiki locally