Deploying The Weather Manager To Heroku

Share on facebook
Share on google
Share on twitter
Share on linkedin
A screenshot of my weather manager

Note: I posted this previously, but deleted it by accident ?. Hopefully the second version is better than the first!

This is a quick blog on deploying my weather manager to Heroku. If you’d like to check it out, it can be viewed here.

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:

Error: 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:

  • ./dist contains main.js
  • .env (which contains my API key) is in the root directory
How the weather manager files are organised

Step 1: Express.js — web app framework

  • Create server.js in the root directory, and add the following to it:
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:

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.jsin your root directory and name it webpack.prod.js
  • In webpack.prod.js, remove references to dotenv-webpack, and replace it with the following (in bold):
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': {
         'API_KEY': JSON.stringify(process.env.API_KEY)
      }
    })
  ]
};
  • Under scripts in package.json, add:
"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 which contains references to dotenv-webpack.

  • Set the version of npm and Node.js by adding the below to package.json :
"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();
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
  • Install 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 created
  • 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)!

Weather manager repo: https://github.com/itsellej/js-weather-manager

Weather manager on Heroku: https://peaceful-ridge-32032.herokuapp.com/

To do:

  • Refactor the weather manager
  • Allow the user to type in a city and display the weather for it

Helpful resources: