Published on 23 Jun 2020 by Dave Regg
Ever since joining a Meet Up for the first time last week, I have been thinking about the topic that we discussed during the Meet Up- Express.js. Not because I don't understand it, but because I haven't used Express.js in a while. Since I have been creating a lot of frontend projects with React and keeping my backend separate (in this case, with Contentful), the only need I have had for Express is to run a server in order to deploy my Create-React-App applications.
I wanted to write a short post about what Express.js is, how to use it, and what it's used for as a simple reminder to myself.
Express.js is a simple Node.js package used to run a server using the JavaScript language. Express.js makes web routing and templating much easier. I use Express.js the most for my backend APIs to connect with MongoDB. I then interact with it using React and Redux.
In order to quick start, all's ya need is Node.js installed. Then run $npm init to create a package.json file. Make the entrypoint index.js, create the file, and install express with $npm install --save express.
index.js is where all the Express-y magic happens. The server will run through the port created with Express. Express is run using an app variable. This is basically your app, the application which you're manipulating to go to a page or render a template. Within index.js, create some variables.
const express = require('express');
const app = express();
const port = 5000;
Since Webpack isn't used in a regular JavaScript project, you must use require as opposed to import statements.
There are two basic methods used on app in order to run an Express application - .get() and .listen(). At its core, the .get() method will take in a route, '/', and a callback function, which will request data from the server and / or respond with information.
app.get('/', (res, req) => { res.send('Hello world!') });
Request is typically used for requesting information from the app Head or for a different type of route such as a POST, PUT, or DELETE route. Response is typically what is seen by the user at that route. In this case, I'm sending a simple string- Hello world!.
app.listen(port, () => console.log('listening')); means that the server is running and you can now visit localhost:5000, or whichever port you specified, and you will see the rendered string Hello world!.
Now just run the server in your command line $node app and visit localhost:port!
This is Express at its bare bones. The app can take in the method .use() to manipulate different files in order for Express to be able to use those files. Out of the box, Express will not be able to render images. After placing the images in a root directory called public, Express can then render those images after one simple command.
app.use(express.static('public'));
Another example of the .use() method is with templating. The res.send cannot send HTML files. Instead, you'll want to res.render(), which takes in a file as a parameter. The file can be an html file, but if you want to render a template, you'll need a templating engine like pug, ejs, or handlebars, to name a few.
app.use('view engine', 'pug');
Then add your templates to a ./views directory and have your route render that template with dynamic information!
app.get('/about', (req, res) => res.render('about', {name: 'Dave'}));
The name prop will be send to the about.pug file found in /views, and can be used like a variable within the template!
For anyone who has built a server and routed with vanilla JavaScript, you know how important Express.js is to the JavaScript community! Routing, views, and dynamic information is so much more useful with Express, and I encourage anyone who wants to become a JavaScript master to read their incredible docs on their website!