CODEWITHSUNDEEP
javascriptnode.jsexpressherokunetlify
al feratovic
al feratovic

Reputation: 99

How to deploy full-stack app to heroku or netlify? Which files are necessary?

I have a full-stack app that runs great on LocalHost, but once it gets deployed to the web (either Heroku or netlify), the app stops working properly. My question is what are the necessary changes I need to make in order for the backend to work properly and continue working with the API in order to update the frontend, etc. I've already tried changing the port on express: 

const PORT = process.env.PORT || 5000;
app.listen(PORT, "0.0.0.0", err => {
  if (err) {
    console.error(err)
  } else {
    console.log(`Running on port ${PORT}`)

} })

Do I need to add my own .env file for the port, or does heroku do it automatically? Thanks in advance!

Upvotes: 1

Views: 5005

Answers (2)

Skerrepy
Skerrepy

Reputation: 392

if you are going to use netlify you can only host static files which means if you are going to do that you might need to seperate your backend from your frontend code wise host the backend in heroku and your frontend on netlify also you need a procfile to tell heroku what to do with your app if you are going to build react with your backend in the same server hope this help people who are wondering about netlify/heroku deployment

Upvotes: 3

Muhand Jumah
Muhand Jumah

Reputation: 1958

If you are going to be using heroku and assuming you have already setup your heroku account and already have heroku terminal installed and connected (if you are having troubles there let me know)

Then you need the following:

  1. Procfile - this file tells heroku what script to use to run your server. Make sure you name it Procfile and no extensions.

    It can include something like the following code

    web: yarn heroku-start - Note here I am using yarn as my pacakge manager, you can easily replace it with npm if that's what you are using. I am also calling heroku-start which is a script defined in my package.json

    Here is a sample of pacakge.json (I only included important lines)

{
 ...
  "scripts": {
    "dev": "nodemon -w src --exec \"babel-node src --presets env,stage-0\"",
    "build": "babel src -s -D -d dist --presets env,stage-0",
    "start": "pm2 start dist",
    "prestart": "yarn -s build",
    "heroku-prestart": "yarn global add pm2 && pm2 install pm2-logrotate",
    "heroku-start": "node dist",
    "heroku": "yarn -s build && git add . && git commit -m \"Rebuilt dist folder\" && git push heroku mj/bug/memory-leak:master",
    "lint": "eslint src",
    "heroku-postbuild": "echo Skip build on Heroku"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^4.13.0"
  },
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 9,
      "sourceType": "module"
    },
    "env": {
      "node": true
    },
    "rules": {
      "no-console": 0,
      "no-unused-vars": [
        "warn",
        {
          "argsIgnorePattern": "^_"
        }
      ]
    }
  },
  "heroku-run-build-script": true
}

I am using babel to build my project. Please don't get overwhelmed with the amount of scripts I have, some are useless. You should pay attention however to this line "heroku-start": "node dist" under scripts - this is my script to run my application on heroku. yours can say something like node index.js I am using dist because babel is building my application to make it available with older ecma versions while allowing me to use new ecma version, the script build is what generates my dist folder.

I have also included my devDependences just in case you are interested.

  1. You also need app.json - this file basically describes your application for heroku.

Here is a sample

{
  "name":"myApp",
  "description":"my cool app",
  "repository":"https://github.com/mycoolapp/",
  "logo":"http://node-js-sample.herokuapp.com/node.svg",
  "keywords":["node","express","anothertag"],
  "image":"heroku/nodejs"
}

After this is done you can upload your project to heroku and it should run fine. You can setup a hook between heroku and your master branch on github so you have automatic deployment when you push to maser or merge to it.

NEXT:

I have noticed something off in your code, I wouldn't recommend using 0.0.0.0 on heroku, here is some explanation as to why https://help.heroku.com/P1AVPANS/why-is-my-node-js-app-crashing-with-an-r10-error

here is your new code

const PORT = process.env.PORT || 5000;
app.listen(PORT, function(err) {
  if (err) {
    console.error(err)
  } else {
    console.log(`Running on port ${PORT}`)
}
}

Also don't use arrow functions as some browsers and heroku may not build it correctly (thats why I use babel).

Finally, this is a good tutorial on creating nodejs apps on heroku.

https://appdividend.com/2018/04/14/how-to-deploy-nodejs-app-to-heroku/

Good luck.

Upvotes: 1

Related Questions