How To Deploy A Web App To Heroku
Tags: heroku, javascript, node, webpack
Published: 2020-09-01 11:30:39

---
title: How To Deploy A Web App To Heroku
published: true
date: 2019-01-30 00:00:00 UTC
tags: 
canonical_url: https://ellehallal.dev/blog/2019/01/2019-01-30-how-to-deploy-a-web-app-to-heroku/
tags: #heroku, #javascript, #nodejs, #webpack
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/sou19qs1raxc0xpxc23p.png
---
<center><h3>Originally posted at <a href="https://ellehallal.dev" target="_blank">ellehallal.dev</a>👩🏽‍💻</h3></center>

---

![](https://i.imgur.com/oVoqC2t.png)

This is a quick blog on how I deployed my weather manager app to Heroku.

- [Github repository](https://github.com/ellehallal/js-weather-manager)
- [Weather Manager on Heroku](https://peaceful-ridge-32032.herokuapp.com/).

* * *

Deploying took longer than anticipated, due to an issue I was experiencing with dotenv-webpack and dotenv in a production environment. The following error kept popping up when deploying to Heroku:

```
failed to load ./.env

```

Thanks to one of my mentors, Dan, for helping me to figure out what was going on! As this issue has been resolved, this blog will outline the steps in an order that should not cause errors when deploying.

For reference, here’s how my weather manager files are organised. There are hidden files:

![](https://i.imgur.com/Xls1A5f.png)

- `./dist` contains `main.js`

- `.env` (which contains my API key) is in the root directory

* * *

## Step 1: Express.js — web app framework

- Create `server.js` in the root directory, and add the following code:

```javascript
const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();

app.use(express.static(__dirname + '/dist'));

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'index.html'));
});

app.listen(port);
```

- Run `npm install express`

### Key points

- `__dirname` is the directory where `server.js` is

- `__dirname + ‘/dist'` is the current directory from where `main.js` is running

* * *

## Step 2: Create webpack.prod.js

This step is important if you have `dotenv-webpack` installed. If installed then in `webpack.config.js`, `dotenv-webpack` is required:


```javascript
const path = require("path");
const Dotenv = require("dotenv-webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  node: {
    fs: "empty",
  },
  plugins: [new Dotenv()],
};
```

This is fine for development, but doesn’t seem to work well for production. Therefore, a similar file is needed for production only, which doesn’t contain references to `dotenv-webpack`.

- Create a copy of `webpack.config.js` in your root directory and name it `webpack.prod.js`

- In `webpack.prod.js`, remove references to `dotenv-webpack`, and replace it with the following:

```javascript
const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "production",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  node: {
    fs: "empty",
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {},
    }),
  ],
};
```

- Under scripts in `package.json`, add:

```javascript
"scripts": {
  "start": "node server.js",
  "heroku-postbuild": "webpack --config webpack.prod.js"
},
```

As a result, Heroku will use the `webpack.prod.js` file, rather than the `webpack.config.js` file.

- Set the version of npm and Node.js by adding the below to `package.json:`

```javascript
"engines": {
  "node": "11.6.0",
  "npm": "6.5.0"
}
```

* * *

## Step 3: Only require dotenv when NODE\_ENV is set to development

- Assuming dotenv is also installed, add the following to `server.js`, just under `const app = express()`;

```javascript
if (process.env.NODE_ENV == 'development')
require('dotenv').config({ silent: true });
```

* * *

## Step 4: Set dotenv-webpack and dotenv as devDependencies

- For `dotenv-webpack` and `dotenv` to be required during development only, run the following:

```
npm install dotenv --save-dev
npm install dotenv-webpack --save-dev
```

* * *

## Step 5: Deploying to Heroku

- [Sign up to Heroku](https://signup.heroku.com/)

- [Install Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)

- Log into Heroku via the terminal with `heroku login`

- Run `heroku create` to create your app on Heroku. An app name will be generated

- Reinitialise the project by running `git init`

- Set a Heroku remote branch by `heroku git:remote --app [your-heroku-app-name]`

- Set your environment variables — or config vars as they’re referred to in Heroku. Here’s how I set my API key for openweathermap: `heroku config:set API_KEY=myapikey3902e92e802e8`

- Git add and commit

- Push to Heroku with `git push heroku master`

And that’s it (hopefully)!

* * *

## Helpful Resources

- [Webpack.js documentation](https://webpack.js.org/guides/production/)
- [Stack Overflow: Best way to pass variables through Webpack?](https://github.com/gdi2290/angular-starter/issues/386)
- [Deploy your Webpack apps to Heroku in 3 simple steps](https://codeburst.io/deploy-your-webpack-apps-to-heroku-in-3-simple-steps-4ae072af93a8)
- [Configuration and Config Vars | Heroku Dev Center](https://devcenter.heroku.com/articles/config-vars)