How to Build and Deploy a Site on Heroku: A Step-by-Step Guide

Deploying a website on Heroku is a simple process that makes developers to launch, manage, and scale their applications with ease. Heroku’s cloud-based Platform as a Service (PaaS) simplifies the deployment process, making it accessible for both beginners and seasoned/experienced developers. In this guide, we’ll walk you through how to deploy a website on Heroku, ensuring your project is live and accessible in no time.

1. Sign Up for Heroku

Before you can deploy a website on Heroku, you need to create an account:

1. Visit Heroku.com and sign up for a free account.
2. Verify your email address and log in to the Heroku dashboard.
3. Add payment information if you plan to use features beyond the free tier, though the free plan is sufficient for many small projects.

2. Install the Heroku CLI for Deployment

To deploy a website on Heroku efficiently, the Heroku Command Line Interface (CLI) is indispensable:

1. Download the Heroku CLI from the Heroku CLI Installation Page and choose the appropriate package for your operating system.
2. Verify the installation by running: heroku --version
3. Log in to Heroku via the CLI: heroku login This command will open your default web browser for authentication.

3. Prepare Your Project for Heroku Deployment

To successfully deploy a website on Heroku, your project needs to follow specific structural guidelines. Here’s how to set up a simple Node.js project:

Project Structure for Deploying on Heroku

my-heroku-app/
├─ package.json
├─ index.js
└─ public/

Key Components:

• index.js: The main server file handling routes and server logic.
• package.json: Specifies dependencies and scripts required to run your app.
• public/: Contains static files like HTML, CSS, and client-side JavaScript.

Example index.js for Deployment

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

// Serve static files from 'public' folder
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.send('Hello from Heroku!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

Example package.json for Heroku Deployment

{
  "name": "my-heroku-app",
  "version": "1.0.0",
  "description": "A simple Node.js app for Heroku",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "engines": {
    "node": "16.x"
  }
}

Note: The engines field specifies the Node.js version Heroku should use to run your application.

4. Initialize a Git Repository for Deployment

Deploying a website on Heroku requires your project to be version-controlled with Git:

1. Navigate to your project directory in the terminal.
2. Initialize a Git repository and commit your files: git init git add . git commit -m "Initial commit"

5. Create a Heroku App for Deployment

With your project prepared, the next step is to create a Heroku app:

heroku create

• This command generates a random name for your app, such as stormy-river-12345.
• To specify a custom name, use: heroku create my-heroku-app-name
• Heroku will provide a URL (e.g., https://my-heroku-app-name.herokuapp.com) where your deployed website will be accessible.

6. Deploy Your Website on Heroku

Now, let’s deploy your website on Heroku:

git push heroku main

• If your local Git branch is named master, use: git push heroku master
• Heroku will automatically detect the Node.js app, install dependencies, and start your server.

7. Verify Your Deployed Website on Heroku

After deploying, ensure your website is live:

heroku open

• This command opens your app in the default web browser.
• You should see your “Hello from Heroku!” message or your customized homepage.

8. Manage Environment Variables on Heroku

Deploying a website on Heroku often requires environment variables for configuration:

heroku config:set KEY=VALUE

• In your Node.js code, access these variables using: process.env.KEY

9. Add a Custom Domain to Your Heroku App (Optional)

Enhance your deployed website on Heroku by adding a custom domain:

1. Navigate to your app’s dashboard on Heroku and select Settings.
2. Under Domains, click Add domain and enter your custom domain name.
3. Update your DNS settings with your domain registrar to point to the Heroku-provided domain (e.g., example.herokudns.com).

10. Best Practices for Deploying on Heroku

To ensure a smooth deployment and optimal performance, consider the following best practices:

1. Use a Procfile: Define how Heroku should run your app. For Node.js: web: node index.js
2. Configure Build Scripts: If using front-end frameworks like React or Vue, ensure build scripts are set up in package.json for Heroku to compile assets.
3. Integrate Databases: Utilize Heroku Postgres or other add-ons for persistent data storage, connecting via environment variables.
4. Monitor Logs and Performance: Use heroku logs --tail for real-time logging and explore Heroku add-ons for enhanced monitoring.
5. Scale Your Application: Adjust dyno counts to handle increased traffic: heroku ps:scale web=2

Conclusion

Deploying a website on Heroku is a seamless process that combines the power of Git, the flexibility of the Heroku CLI, and the simplicity of cloud-based deployment. By following this comprehensive step-by-step guide, you can efficiently deploy your web application, manage configurations, and scale your project as needed. Embrace Heroku’s robust platform to bring your web ideas to life effortlessly!