Easily Host a Node Server on Heroku with Git

Part 1: Making our Express Server

  1. Create a new repository on github
Adding our start script to package.json
module.exports = [
{
id: 1,
title: "Post 1"
},
{
id: 2,
title: "Post 2"
},
{
id: 3,
title: "Post 3"
}
]
node_modules
.DS_Store
.env
/* BOILERPLATE */// configures the dotenv library so that we can access our secret keys as environment variables in production using
// process.env
require('dotenv').config();// import express and cors into our projectconst express = require('express');
const cors = require('cors');
/* DUMMY DATA */// import our "dummy data" of 3 posts from posts.js into our main index.js file. In a real world server, this data would not be stored in a js file,
// but on a database that would then be queried for the desired data before being converted to JSON.
const posts = require('./posts.js')/* MORE BOILERPLATE*/// initialize our server with the express library by calling express(), which returns a server object,
// and saving it to a variable called app
const app = express();// tell our app to use the cors library to allow it to be accessed from a frontend app.use(cors())// tell our app to be able to parse JSON data sent in requests to and responses from our server.app.use(express.json())/* ROUTES: below we will create two simple get routes for our server */// route 1: a welcome message at the base "/" of our server urlapp.get('/', (req, res) => {
res.send('Welcome to my server!')
})
// route 2: a route "/posts" to get all postsapp.get('/posts', (req, res) => {
res.json(posts)
})
/* CONFIGURE THE PORT */// tell our server that it should run on HEROKU's preferred port once in production and hosted
// (HEROKU will automatically choose a port via process.env.PORT, and we don't need to define a process.env.PORT locally)
// OR || in local development, our server will listen on http://localhost:4000
const port = process.env.PORT || 4000/* LISTEN: tell the server to automatically listen for traffic on our port
* (http://localhost:4000 for development, HEROKU's automatically chosen port for production ) */
app.listen(port, () => {console.log(`Server listening on port ${port}!`)})
The welcome message of our server displayed locally in the browser
Our posts locally displayed in the browser

Part 2: Hosting Our Server on Heroku

  1. Create a free Heroku account
Creating out heroku app in the terminal
remote: https://morning-bastion-41632.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy… done.
To https://git.heroku.com/morning-bastion-41632.git
* [new branch] main -> main
Annotated example of our posts route in the browser
Setting the secret key as a Heroku configuration variable in the terminal

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Fares

Michael Fares

10 Followers

I am a Frontend Web Developer, Educator, Lifelong autodidact, 3rd Culture Kid, and Citizen of the World.