publish news-publish-management to netlify and heroku

Posted on Edited on

I am learning react at home duraing the annual leave and company holiday. I have created a repository named news-publish-management at GitHub.

The node version I used is v16.13.1

The react version I used is ^17.0.2

The first commit is doing following 9 things:

  1. Use yarn for creating a new react app 
    1
    yarn create react-app news-publish-manaments

    Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

Yarn allows you to use other developers’ solutions to different problems, making it easier for you to develop your software. If you have problems, you can report issues or contribute back on GitHub, and when the problem is fixed, you can use Yarn to keep it all up to date.

I will swith to yarn instead of npm after this learning section.

  1. Install json-server for deploying the db.json to hereku

    1
    yarn add json-server

    JSONServer was stored in GitHub.

  2. Modify the package.json, and append below line in scripts selction

    1
    "json-server": "node mock-api/server.js"

  3. Add netlify.toml

    1
    touch netlify.toml

    paste content into the toml file

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    [build]
      command = "CI= npm run build"

    [[redirects]]
      from = "/api/*"
      to = "https://news-publish-management.herokuapp.com/api/:splat"
      status = 200

    [[redirects]]
      from = "/*"
      to = "/index.html"
      status = 200

  4. Add Procfile, the detail information of ProcFile in Heroku can be foud in here. Base on this page, we can add below line in the Procfile as well.

    1
    web: npm run json-server-prod

  5. Create a server.js under mock-api folder.

    1
    2
    mkdir mock-api
    touch mock-api/server.js

    paste below content into server.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const jsonServer = require("json-server");
    const server = jsonServer.create();
    const router = jsonServer.router("mock-api/db.json");
    const middlewares = jsonServer.defaults();
    const port = process.env.PORT || 4000; 

    server.use(middlewares);
    server.use("/api", router);

    server.listen(port);

  1. Push above changs into to GitHub

  2. Go to Heroku for deploying news-publish-managements.
    Once it was successfully deployed. It can be verified via
    https://news-publish-management.herokuapp.com/api/news

  1. Go to netlify for deploying news-publish-managements.
    Once it was successfully deployed. It is can be verified via
    https://news-publish-management.netlify.app/