faizal-siddiqui/evaluation-server-deploy

A server created using Json-Server deployed on Render

Deploying JSON Server on render.com ( Heroku Alternative )

We are gonna see how we can deploy json-server to render.com which is a good alternative to heroku as heroku is gonna shut down it's free services in sometime.

You can read json server documentation here

Step 1 : Create a folder ( You can give it any name; I am gonna name my folder mock-server-app

mkdir mock-server-app

Step 2 : Move into folder

cd mock-server-app

Step 3 : Run the following command

npm init -y

When you run the above command. You should see something like this in your terminal. This will also create a package.json file which would look something like this

package.json

Wrote to /Users/abduljabbarpeer/Teach_Frontend/mock-server-app/package.json: #( package.json path in your system will be displayed )

{
  "name": "mock-server-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

Step 4 : Install json-server library

npm i json-server

Step 5 : For the next step; You need to create some files and add/change some code/data to it

PS : This is part of json-server documentation. Here's the documentation link

1. Create a file called db.json and add the data that you want to host. I am adding the following fake users data which has been generated using is super helpful if you want to generate fake data for any purpose ( I use it for dev purposes )

db.json

{
  "users": [
    {
      "id": 1,
      "name": "Gertrudis Tatterton",
      "age": 18,
      "email": "[email protected]"
    },
    {
      "id": 2,
      "name": "Gail Newbatt",
      "age": 53,
      "email": "[email protected]"
    },
    {
      "id": 3,
      "name": "Walliw Wilstead",
      "age": 49,
      "email": "[email protected]"
    },
    {
      "id": 4,
      "name": "Abran Proback",
      "age": 29,
      "email": "[email protected]"
    },
    {
      "id": 5,
      "name": "Roda Chappelow",
      "age": 31,
      "email": "[email protected]"
    },
    {
      "id": 6,
      "name": "Karney Wylie",
      "age": 22,
      "email": "[email protected]"
    },
    {
      "id": 7,
      "name": "Cammi Pimbley",
      "age": 63,
      "email": "[email protected]"
    },
    {
      "id": 8,
      "name": "Gavra Manning",
      "age": 43,
      "email": "[email protected]"
    },
    {
      "id": 9,
      "name": "Zachary Seward",
      "age": 45,
      "email": "[email protected]"
    },
    {
      "id": 10,
      "name": "Chucho Norssister",
      "age": 20,
      "email": "[email protected]"
    }
  ]
}

1. Create a file called server.js and add the following code

server.js

const jsonServer = require("json-server"); // importing json-server library
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults();
const port = process.env.PORT || 3001; // you can use any port number here; i chose to use 3001

server.use(middlewares);
server.use(router);

server.listen(port);

1. Create a file called .gitignore and add the following code ( It ignores node_modules when the code is hosted on github )

node_modules;

1. Finally you need to make some changes to your package.json file that got created initially.

{
  "name": "mock-server-app",
  "version": "1.0.0",
  "description": "mock server app",
  "main": "server.js", // since i want server.js to be entry point. I need to update the same here( if you have used index.js. then update your filename here )
  "scripts": {
    "start": "node server.js" // npm start command
  },
  "keywords": [],
  "author": "abdul",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.17.0"
  }
}

Step 6 : Pushing the code to github

1. Create a repo on github

1. Initialise Git Repo

git init

1. Add Origin

git remote add origin https://github.com/<your-github-username>/<your-repo-name>.git

1. Add

git add .

1. Commit

git commit -m "add-your-commit-message-here"

1. Push

git push origin main

just check your github repo whether it has been updated or not

Step 7 : Now comes the part of deployment. For that please go to https://render.com/

1. Click on signin

1. If you don’t have an account; Signup and then login. you have lot of options to signup and login. I personally went with using github credentials and I’d suggest you do the same ( I am gonna continue this with the assumption that you have done signup and login using github option )

PS : When you signup for the first time; You will be asked to verify your email and once verified you will able to start utilizing render.com services

1. This is how the dashboard of render.com will look like once you sign in

and if you have already created a project in the past. It’d look like this

Clicking on New + Button at the top also gives you the same options

1. Click on New Service button. You’ll see a page like this. Connect your github account

1. You’ll see the following screen then

You can either give permission to select all your repositories or only selected repository. You’ll have to chose repository here if you go with only select repository option.

I have selected All Repositories and gave permission to access all repositories. Then click on install button

Now I will have to select the repository that I want to deploy

1. So I select the repo ( mock-server-app ) that I want to deploy

1. You’ll get the following screen. Some of the input boxes here gets auto populated from the github repo itself which is great.

Give name to your application and you can leave root directory empty for this one

Enviroment, Region, Branch, Build Command, Start Command data was automatically picked which is fine as that’s correct. If you need to configure something in here; you can do so

The Name field here will be your application URL once it’s deployed. So I am gonna go ahead and give it some name

Plan I have selected is Free

You can go to Advanced and add .env variables and also you can chose Auto-Deploy option to either Yes or No. By default it’ll be yes.

And since I don’t have .env variables and I want to auto-deploy my changes on github repo. I am not gonna go to Advance and make any changes

8. I’ll then click on Create Web Service which will showcase the following screen.

1. Once deployment is successful. If you go check the same in browser. I am able to access data as expected