Cara menerapkan aplikasi Anda ke web menggunakan Express.js dan Heroku

Jika Anda baru mengenal dunia pengembangan web, Anda akan menghabiskan banyak waktu untuk mempelajari cara membangun situs statis dengan HTML, CSS, dan JavaScript.

Anda kemudian dapat mulai mempelajari cara menggunakan kerangka kerja populer seperti React, VueJS atau Angular.

Namun setelah mencoba beberapa ide baru dan menjalankan beberapa situs secara lokal, Anda mungkin bertanya-tanya bagaimana sebenarnya menerapkan situs atau aplikasi Anda. Dan ternyata, terkadang sulit untuk mengetahui dari mana harus memulai.

Secara pribadi, saya menemukan menjalankan server Express yang dihosting di Heroku salah satu cara termudah untuk memulai. Artikel ini akan menunjukkan kepada Anda bagaimana melakukan ini.

Heroku adalah platform cloud yang mendukung sejumlah bahasa pemrograman dan kerangka kerja yang berbeda.

Ini bukan posting bersponsor - tentu saja ada banyak solusi lain yang tersedia, seperti:

  • Samudera Digital
  • Layanan Web Amazon
  • Biru langit
  • Google Cloud Platform
  • Netlify
  • ZEIT Sekarang

Periksa semuanya dan lihat mana yang paling sesuai dengan kebutuhan Anda.

Secara pribadi, saya menemukan Heroku yang tercepat dan termudah untuk mulai menggunakan "di luar kotak". Tingkat gratis agak terbatas dalam hal sumber daya. Namun, saya yakin dapat merekomendasikannya untuk tujuan pengujian.

Contoh ini akan menghosting situs sederhana menggunakan server Express. Berikut adalah langkah-langkah tingkat tinggi:

  1. Menyiapkan Heroku, Git, npm
  2. Buat server Express.js
  3. Buat file statis
  4. Terapkan ke Heroku

Ini akan memakan waktu total sekitar 25 menit (atau lebih lama jika Anda ingin menghabiskan lebih banyak waktu pada file statis).

Artikel ini mengasumsikan Anda sudah tahu:

  • Beberapa dasar-dasar HTML, CSS dan JavaScript
  • Penggunaan baris perintah dasar
  • Git level pemula untuk kontrol versi

Anda dapat menemukan semua kode di repositori ini.

Pengaturan

Langkah pertama dalam proyek apa pun adalah menyiapkan semua alat yang Anda tahu akan Anda perlukan.

Anda harus memiliki:

  • Node dan npm diinstal di mesin lokal Anda (baca cara melakukannya di sini)
  • Git diinstal (baca panduan ini)
  • Heroku CLI diinstal (begini cara melakukannya)

1. Buat direktori baru dan lakukan inisialisasi repositori Git

Dari baris perintah, buat direktori proyek baru dan pindahkan ke dalamnya.

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

Sekarang Anda berada di folder proyek, inisialisasi repositori Git baru.

⚠️ Langkah ini penting karena Heroku mengandalkan Git untuk menyebarkan kode dari mesin lokal Anda ke server cloud-nya ⚠️

$ git init

Sebagai langkah terakhir, Anda dapat membuat file README.md untuk diedit di tahap selanjutnya.

$ echo "Edit me later" > README.md

2. Masuk ke Heroku CLI dan buat proyek baru

Anda dapat masuk ke Heroku menggunakan Heroku CLI (antarmuka baris perintah). Anda harus memiliki akun Heroku gratis untuk melakukan ini.

Ada dua opsi di sini. Standarnya adalah Heroku yang memungkinkan Anda masuk melalui browser web. Menambahkan -ibendera memungkinkan Anda masuk melalui baris perintah.

$ heroku login -i

Sekarang, Anda dapat membuat proyek Heroku baru. Aku menelepon milikku lorem-ipsum-demo.

$ heroku create lorem-ipsum-demo

Memberi nama proyek Anda:

  • Heroku akan menghasilkan nama acak untuk proyek Anda jika Anda tidak menentukannya di perintah.
  • Nama tersebut akan menjadi bagian dari URL yang dapat Anda gunakan untuk mengakses proyek Anda, jadi pilihlah yang Anda suka.
  • Ini juga berarti bahwa Anda harus memilih nama proyek unik yang belum pernah digunakan orang lain.
  • Anda dapat mengganti nama proyek Anda nanti (jadi jangan terlalu khawatir tentang mendapatkan nama yang sempurna sekarang).

3. Inisialisasi proyek npm baru dan instal Express.js

Selanjutnya, Anda dapat menginisialisasi proyek npm baru dengan membuat file package.json. Gunakan perintah di bawah ini untuk melakukan ini.

⚠️ Langkah ini sangat penting. Heroku mengandalkan Anda untuk menyediakan file package.json untuk mengetahui bahwa ini adalah proyek Node.js ketika membangun aplikasi Anda ⚠️

$ npm init -y

Selanjutnya, instal Express. Express adalah framework server yang banyak digunakan untuk NodeJS.

$ npm install express --save

Akhirnya, Anda siap untuk mulai membuat kode!

Menulis server Express sederhana

Langkah selanjutnya adalah membuat file bernama app.js, yang menjalankan server Express secara lokal.

$ touch app.js

File ini akan menjadi titik masuk untuk aplikasi jika sudah siap. Artinya, satu perintah yang diperlukan untuk meluncurkan aplikasi adalah:

$ node app.js

Tetapi pertama-tama, Anda perlu menulis beberapa kode di file.

4. Edit konten app.js

Buka app.jsdi editor favorit Anda. Tulis kode yang ditunjukkan di bawah ini dan klik simpan.

// create an express app const express = require("express") const app = express() // use the express-static middleware app.use(express.static("public")) // define the first route app.get("/", function (req, res) { res.send("

Hello World!

") }) // start the server listening for requests app.listen(process.env.PORT || 3000, () => console.log("Server is running..."));

Komentar harus membantu menunjukkan apa yang sedang terjadi. Tapi mari kita segera memecah kode untuk memahaminya lebih lanjut:

  • The first two lines simply require the Express module and create an instance of an Express app.
  • The next line requires the use of the express.static middleware. This lets you serve static files (such as HTML, CSS and JavaScript) from the directory you specify. In this case, the files will be served from a folder called public.
  • The next line uses app.get() to define a URL route. Any URL requests to the root URL will be responded to with a simple HTML message.
  • The final part starts the server. It either looks to see which port Heroku will use, 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 step is to create your static files. These are the HTML, CSS and JavaScript files you will serve up whenever a user visits your project.

Remember in app.js you told the express.static middleware to serve static files from the public directory.

The first step is of course to create such a directory and the files it will contain.

$ mkdir public $ cd public $ touch index.html styles.css script.js

5. Edit the HTML file

Open index.html in your preferred text editor. This will be the basic structure of the page you will serve to your visitors.

The example below creates a simple landing page for a Lorem Ipsum generator, but you can be as creative as you like here.

Lorem Ipsum generator

How many paragraphs do you want to generate?

Generate Copy!

6. Edit the CSS file

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

The CSS below is for the Lorem Ipsum example. But again, feel free to be as creative as you want.

h1 { font-family: 'Alegreya' ; } body { font-family: 'Source Sans Pro' ; width: 50%; margin-left: 25%; text-align: justify; line-height: 1.7; font-size: 18px; } input { font-size: 18px; text-align: center; } button { font-size: 18px; color: #fff; } #generate { background-color: #09f; } #copy { background-color: #0c6; }

7. Edit the JavaScript file

Finally, you might want to edit the JavaScript file script.js. This will let you make your page more interactive.

The code below defines two basic functions for the Lorem Ipsum generator. Yes, I used JQuery - it'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("

"+data[i]+"

"); } }) $("#copy").click(function() { var range = document.createRange(); range.selectNode($("#lorem")[0]); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand("copy"); window.getSelection().removeAllRanges(); } )

Note that here, the data list is truncated to make it easier to show. In the actual app, it is a much longer list of full paragraphs. You can see the entire file in the repo, or look here for the original source.

Deploying your app

After writing your static code and checking it all works as expected, you can get ready to deploy to Heroku.

However, there are a couple more things to do.

8. Create a Procfile

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

A Procfile is a "process file" which tells Heroku which command to run in order to manage a given process. In this case, the command will tell Heroku how to start your server listening on the web.

Use the command below to create the file.

⚠️This is an important 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 (e.g., ".txt", ".json").

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

9. Add and commit files to Git

Remember you initiated a Git repository when setting up. Perhaps you have been adding and committing files as you have gone.

Before you deploy to Heroku, make sure to add all the relevant files and commit them.

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

The final step is to push to your Heroku master branch.

$ git push heroku master

You should see the command line print out a load of information as Heroku builds and deploys your app.

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

This shows that your build was successful.

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

Quick recap

Below 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, then push to your Heroku master branch

Things to check if your app is not working

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

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

  • Did you initialise a Git repo in your project folder? Check if you ran git init earlier. Heroku relies on Git to deploy code from your local machine.
  • Did you create a package.json file? Check if you ran npm init -y earlier. 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 start the server. Check you have web: node app.js and not web: node index.js.
  • Does Heroku know which port to listen on? Check you used app.listen(process.env.PORT || 3000) in your app.js file.
  • Do your static files have any errors in them? Check them by running locally and seeing if there are any bugs.

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