How to Use Heroku to Upload Html and Js Files

If y'all are new to the globe of web development, you volition spend a lot of time learning how to build static sites with HTML, CSS and JavaScript.

You might and then start learning how to use pop frameworks such as React, VueJS or Angular.

Simply afterward trying out a few new ideas and running some sites locally, you might wonder how to really deploy your site or app. And as it turns out, information technology tin can sometimes exist hard to know where to beginning.

Personally, I discover running an Express server hosted on Heroku ane of the simplest ways to get going. This article volition show y'all how to do this.

Heroku is a cloud platform which supports a number of different programming languages and frameworks.

This is not a sponsored mail - at that place are of form many other solutions available, such as:

• Digital Ocean
• Amazon Web Services
• Azure
• Google Deject Platform
• Netlify
• ZEIT At present

Bank check them all out and see which suits your needs all-time.

Personally, I found Heroku the quickest and easiest to beginning using "out of the box". The gratuitous tier is somewhat limited in terms of resources. Yet, I tin confidently recommend it for testing purposes.

This case volition host a simple site using an Limited server. Here are the loftier-level steps:

1. Setting up with Heroku, Git, npm
2. Create an Express.js server
3. Create static files
4. Deploy to Heroku

Information technology should take about 25 minutes in total (or longer if you want to spend more time on the static files).

This commodity assumes you already know:

• Some HTML, CSS and JavaScript basics
• Basic control line usage
• Beginner-level Git for version control

You tin find all the code in this repository.

Setting up

The first step in any project is to set up all the tools you know y'all'll need.

You'll need to have:

• Node and npm installed on your local auto (read how to do this here)
• Git installed (read this guide)
• The Heroku CLI installed (here's how to exercise it)

ane. Create a new directory and initialise a Git repository

From the command line, create a new project directory and move into information technology.

                $ mkdir lorem-ipsum-demo $ cd lorem-ipsum-demo              

Now yous are in the project folder, initialise a new Git repository.

⚠️This step is important considering Heroku relies on Git for deploying code from your local machine to its cloud servers ⚠️

                $ git init              

As a final stride, you lot can create a README.md file to edit at a later stage.

                $ echo "Edit me later" > README.md              

2. Login to the Heroku CLI and create a new project

You can login to Heroku using the Heroku CLI (command line interface). You lot volition demand to have a free Heroku account to do this.

There are two options here. The default is for Heroku to permit you login through the spider web browser. Adding the -i flag lets yous login through the command line.

                $ heroku login -i              

Now, y'all can create a new Heroku project. I called mine lorem-ipsum-demo.

                $ heroku create lorem-ipsum-demo              

Naming your projection:

• Heroku volition generate a random name for your project if you don't specify 1 in the command.
• The name volition form part of the URL you tin employ to access your project, and so choose one you lot like.
• This also ways that you demand to choose a unique project name that no one else has used.
• It is possible to rename your project later on (so don't worry besides much about getting the perfect name right now).

3. Initialise a new npm project and install Express.js

Next, you tin can initialise a new npm project past creating a package.json file. Employ the command below to do this.

⚠️This step is crucial. Heroku relies on you providing a package.json file to know this is a Node.js project when it builds your app ⚠️

                $ npm init -y              

Side by side, install Express. Express is a widely used server framework for NodeJS.

                $ npm install express --save              

Finally, you lot are ready to start coding!

Writing a simple Limited server

The next step is to create a file called app.js, which runs an Limited server locally.

                $ touch app.js              

This file will be the entry point for the app when it is set up. That means, the one command needed to launch the app will exist:

                $ node app.js              

Simply first, you need to write some code in the file.

4. Edit the contents of app.js

Open app.js in your favourite editor. Write the lawmaking shown beneath and click salvage.

                // create an express app const express = require("express") const app = express()  // use the limited-static middleware app.use(express.static("public"))  // define the first route app.go("/", function (req, res) {   res.send("<h1>Hi World!</h1>") })  // first the server listening for requests app.heed(process.env.PORT || 3000,  	() => console.log("Server is running..."));              

The comments should assist indicate what is happening. But let's quickly break the code down to understand it further:

• The kickoff two lines merely require the Express module and create an example of an Express app.
• The adjacent line requires the utilize of the express.static middleware. This lets you lot serve static files (such as HTML, CSS and JavaScript) from the directory yous specify. In this case, the files will be served from a folder chosen public.
• The next line uses app.get() to ascertain a URL road. Whatsoever URL requests to the root URL will exist responded to with a simple HTML message.
• The final office starts the server. Information technology either looks to see which port Heroku will utilize, or defaults to 3000 if you are running locally.

⚠️The use of process.env.PORT || 3000 in the last line is important for deploying your app successfully ⚠️

If you save app.js and start the server with:

                $ node app.js              

You can visit localhost:3000 in your browser and see for yourself the server is running.

Create your static files

The next footstep is to create your static files. These are the HTML, CSS and JavaScript files you will serve upward whenever a user visits your projection.

Call up in app.js y'all told the express.static middleware to serve static files from the public directory.

The first pace is of course to create such a directory and the files information technology volition contain.

                $ mkdir public $ cd public $ bear on index.html styles.css script.js              

5. Edit the HTML file

Open alphabetize.html in your preferred text editor. This will exist the basic construction of the page you lot will serve to your visitors.

The example below creates a simple landing page for a Lorem Ipsum generator, but you tin can be every bit creative as yous similar here.

                <!DOCTYPE html> <head> 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 	<link href="https://fonts.googleapis.com/css?family=Alegreya|Source+Sans+Pro&display=swap" rel="stylesheet"> 	<link rel="stylesheet" type="text/css" href="styles.css"> </head> <html> <trunk> <h1>Lorem Ipsum generator</h1>   <p>How many paragraphs practise you lot want to generate?</p>   <input type="number" id="quantity" min="1" max="20" value="1">   <button id="generate">Generate</button>   <button id="copy">Copy!</push button> <div id="lorem"> </div> <script type="text/javascript" src="script.js"></script> </body> </html>              

half-dozen. Edit the CSS file

Next up is editing the CSS file styles.css. Make certain this is linked in your HTML file.

The CSS beneath is for the Lorem Ipsum case. But again, feel free to be equally creative as you want.

                h1 { 	font-family unit: 'Alegreya' ; }  torso { 	font-family unit: 'Source Sans Pro' ; 	width: 50%; 	margin-left: 25%; 	text-align: justify; 	line-height: one.7; 	font-size: 18px; }  input { 	font-size: 18px; 	text-align: center; }  push { 	font-size: 18px; 	color: #fff; }  #generate { 	background-color: #09f; }  #copy { 	background-colour: #0c6; }              

7. Edit the JavaScript file

Finally, you might desire to edit the JavaScript file script.js. This will let you brand your folio more interactive.

The code below defines ii basic functions for the Lorem Ipsum generator. Yes, I used JQuery - information technology's quick and easy to work with.

                $("#generate").click(function(){ 	var lorem = $("#lorem"); 	lorem.html(""); 	var quantity = $("#quantity")[0].valueAsNumber; 	var data = ["Lorem ipsum", "quia dolor sit", "amet", "consectetur"]; 	for(var i = 0; i < quantity; i++){ 		lorem.append("<p>"+data[i]+"</p>"); 	} })  $("#copy").click(office() { 	var range = document.createRange(); 	range.selectNode($("#lorem")[0]); 	window.getSelection().removeAllRanges(); 	window.getSelection().addRange(range); 	certificate.execCommand("copy"); 	window.getSelection().removeAllRanges(); 	} )              

Note that here, the information list is truncated to arrive easier to show. In the bodily app, it is a much longer list of total paragraphs. You tin see the entire file in the repo, or await here for the original source.

Deploying your app

After writing your static code and checking it all works as expected, y'all can go set up to deploy to Heroku.

However, in that location are a couple more things to exercise.

8. Create a Procfile

Heroku volition need a Procfile to know how to run your app.

A Procfile is a "procedure file" which tells Heroku which command to run in order to manage a given process. In this example, the control will tell Heroku how to get-go your server listening on the web.

Use the command below to create the file.

⚠️This is an of import step, because without a Procfile, Heroku cannot put your server online. ⚠️

                $ echo "web: node app.js" > Procfile              

Notice that the Procfile has no file extension (eastward.g., ".txt", ".json").

Also, see how the command node app.js is the aforementioned 1 used locally to run your server.

9. Add and commit files to Git

Remember you initiated a Git repository when setting upwards. Perchance you have been adding and committing files as y'all have gone.

Before you deploy to Heroku, brand certain to add all the relevant files and commit them.

                $ git add . $ git commit -g "ready to deploy"              

The terminal step is to push button to your Heroku master co-operative.

                $ git push heroku main              

You should see the control line print out a load of information every bit Heroku builds and deploys your app.

The line to expect for is: Verifying deploy... done.

This shows that your build was successful.

Now you can open the browser and visit your-projection-name.herokuapp.com. Your app will be hosted on the web for all to visit!

Quick epitomize

Beneath are the steps to follow to deploy a simple Express app to Heroku:

1. Create a new directory and initialise a Git repository
2. Login to the Heroku CLI and create a new project
3. Initialise a new npm project and install Express.js
4. Edit the contents of app.js
5. Edit the static HTML, CSS and JavaScript files
6. Create a Procfile
7. Add and commit to Git, and then push to your Heroku chief branch

Things to check if your app is not working

Sometimes, despite best intentions, tutorials on the Internet don't work exactly as yous expected.

The steps below should help debug some common errors you might encounter:

• Did you initialise a Git repo in your project binder? Cheque if y'all ran git init earlier. Heroku relies on Git to deploy lawmaking from your local motorcar.
• Did you lot create a package.json file? Check if y'all ran npm init -y before. Heroku requires a package.json file to recognise this is a Node.js project.
• Is the server running? Make sure your Procfile uses the correct file name to offset the server. Check you have web: node app.js and not web: node index.js.
• Does Heroku know which port to listen on? Check y'all used app.listen(process.env.PORT || 3000) in your app.js file.
• Do your static files take whatever errors in them? Check them by running locally and seeing if there are whatsoever bugs.

Thanks for reading - if you made it this far, you might desire to checkout the finished version of the demo project.

---

---

Learn to code for gratuitous. freeCodeCamp'due south open up source curriculum has helped more than 40,000 people get jobs as developers. Get started

cropperthein1969.blogspot.com

Source: https://www.freecodecamp.org/news/how-to-deploy-your-site-using-express-and-heroku/

Share this post