But what is Express anyway?
Express is a minimal and flexible Node.js web application framework.
Express is a great backend and API option for any project with a JavaScript (or JS framework) frontend, because it allows you to keep all of your code in the same language and the same family. You don't need to learn one language for the front end and an entirely different language for the back. If you already work in JavaScript for your frontend projects, I think you'll be able to pick up Express really quickly. I know I did!
Sweet! Let's get started!
Before getting started with Express, it's important to make sure that you have Node installed on your system, and that you have at least some exposure to Node.
I highly recommend this crash course from TraversyMedia on Youtube.
To get started setting up your server, you'll want to make a new folder in which you will be placing your project, and then npm init to setup your package.json. For this tutorial, I recommend running npm init -y so you can skip the setup questions and get right to coding...
$ mkdir my-first-express-server
$ cd my-first-express-server
$ npm init -y
Once you have your package.json, you need to install Express
$ npm i express
And I also highly recommend including the Nodemon utility in your devDependencies. Nodemon automically restarts your server on save so that you don't have to repeatedly ^c and restart your server with every change.
$ npm i -D nodemon
the -D flag indicates that you specifically want this to be installed as a devDependecy in your package.json
Next, add an index.js file to your project folder.
(now would be a good time to git init, but first make sure you add your node_modules to a .gitignore file!)
Now for the fun stuff! 🎉
The first thing we need to do is require('express') in our index.js
const express = require('express')
The coolest thing about Express, in my opinion, is that this require is all we need to set up our "Hello World" server or a simple API!
if you want to serve static files (like HTML and CSS) using your server, you can add require('path') at the top of index.js. We'll cover this more later...
Now we need to set express to a variable that we'll call (mostly) all of our other methods on to get our server working:
const app = express();
/* it's pretty common for this variable to be called 'app' but you
can theoretically call it whatever you want! */
Next, before we do anything else, we need to tell our app what PORT to listen on when we run the server.
You could tell your server to just use port 5000 and be done with it, but it's good to plan ahead for eventually deployment!
Once your server has been deployed, it's likely your deployment will tell your app to use a port stored in an .env file. So we need to tell our app to listen on port 5000 or whatever port is being passed to the app in the .env file...
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
/* app.listen() takes 2 arguements: the port you want to listen on, and a callback. Here we're passing a console.log() in the callback that will let us know what PORT server is running on */
place this code at the bottom of your index.js file...the rest of what we're about to write in index will go between your app variable declaration and your PORT variable declaration
Let's take a quick trip to our package.json ...
So, remember when I had you install nodemon? Now's the time to use it!
Inside of your package.json you're going to write 2 "scripts"...
First, we want a script called dev, where we'll use nodemon to run our index.js file. Then we want to write a "start" script that will be used to run the app once it's deployed:
"scripts": {
"dev": "nodemon index",
"start": "node index"
}
package.json
Ok, cool, back to our index.js ...
We made it! It's time! We're so close to "Hello World"! We're going to write our first Express get request handler right now!
Here is the syntax for the get request:
app.get('/', (req, res) => {
//code goes here
});
index.js
First we call app.get(), passing it the route we want to get (in this case the root route '/') and a callback which will tell the server what to actually do with this route. We pass the req (request) and res (response) to this callback.
Getting our "Hello World" on the page is as simple as using the res.send() function! You can pass strings to res.send() (typically this would be the path to the file you want to server on the specified route) but for now we're going to pass a string of HTML:
app.get('/', (req, res) => {
res.send(
"<h1>Hello World!</h1>"
// or whatever your favorite hello world is!
)
});
Now, from your CLI we want to run the dev script we wrote in our package.json:
npm run dev
Then open up your favorite browser and navigate to localhost:5000
You did it! You wrote your first Express server!! 🎉
Do a quick dance party to celebrate, and then go back into your res.send() function and add a few more things to your HTML string. Save your file and watch as nodemon does the behind-the-scenes magic to rerun your server and serve the changes you just made live!
Bonus: Let's serve an actual HTML file!
First, we need to make that HTML file, and put it in the right place.
( this is also when we want to make sure we included require('path') at the top of our file )
First, add a public folder inside of your servers root folder. Then add a file inside of that folder called index.html.
Now, go ahead and put anything you want in index.html. The fastest option is to add the HTML boilerplate, and copy over what you had in your string of HTML from your res.send() function.
Back in index.js, comment out the res.send() inside of your app.get() function.
We're going to replace that line with this:
app.get('/', (req, res) => {
// res.send("<h1>Hello World!</h1>")
res.sendFile(path.join(__dirname, 'public', 'index.html'))
})
Now, we are using the function .sendFile() to tell serve the file index.html inside of the public folder, inside of the current directory (the root of our server)
We can also tell Express to server any static file on its own route:
app.use(express.static(path.join(__dirname, 'public')))
That's a lot of function nesting! Essentially what's happening here is:
the app.use() function tells our app to use the express.static() function to set the path for static files in our app to path.join(__dirname, 'public').
__dirname indicates the current file directory, so we're telling our app that the static files live inside a folder called public inside of the current directory.
Now, if you added another file inside of public called about.html and then navigate to localhost:5000/about.html you'll be served the contents of your about.html file! With one line of code, we're able to serve any file we add to our public folder!
I hope you had fun setting up your Express server with me! Now go forth and make me something cool! Make sure you tweet @ me if you use this tutorial to build your server. I would love to see what you build!
Next up, we'll be covering how to hook in a database with our Express backend, and serving JSON to turn our server into a REST API!
(keep your eyes pealed for the next post in this series coming soon...)
You can find more of my work here on DEV, and on:
Twitter
GitHub
and
CodePen
xx - Pixi
Top comments (4)
Thank you for writing this! For my first foray into Express, I found this accessible and easy to follow. :) Here's a screen recording of what I made! :D
dev-to-uploads.s3.amazonaws.com/i/...
Awesome article! What database are you planning on hooking up? How are you liking Express compared to Rails?
I'm looking to Mongo and Fauna as DB options even tho I'm much more accustomed to relational DBs. I want to learn something new. And I think having a lot of experience with Rails already was good prep for learning Express. I'm already accustomed to setting up RESTful routes and CRUD actions so it's really just down to learning the different syntax and conventions used in Express.
Wonderful and explicit tutorial! Used also this one to refresh my memory.