Learn node with Hilary Quinn Text on Black and Coral background with isolated woman smiling in foreground

Node.js beginners tutorial building an SEO dashboard web app

Playing this video loads a YouTube embed in privacy-enhanced mode.

I’m learning Node.js so that I can rebuild my HTML/CSS/JS Single Page Application into a Node.js web app. Check out my full project set up in the video above which I run through step by step, including:

  • How to run node via terminal with app.js
  • Loading your web app from localhost
  • Project structure including folders, files and public
  • What the code used looks like, from Node.js to EJS
  • Routing pages and partials, like a reusable header and footer
  • Why I’m building an SEO dashboard for client work

I’m only about a week in my own learning process, and so far I am LOVING node.js. As a front-end web designer and SEO, while the initial setup had a steep learning curve, once I started to get used to the environment I find it so easy to develop in, even at these early stages.

Building an SEO dashboard

If you’re an SEO, I really encourage you whether using this or any other technology, to dabble with creating a simple web app to help you with your SEO activities. Especially those repetitive tasks like image compression or generating schema. I’ve never found a neat solution online that would handle all of the activities I’m involved in, and there are so many APIs to plug into when it comes to SEO. For example Google Search Console, Google PageSpeed, YouTube API to generate structured data and there are even more. I haven’t even explored the full potential of what I’m building here, but it’s a really great process of learning, building and reaping the rewards of that hard work when it makes the working day that bit easier for me.

Best build combo for Node.js

My build includes Node.js – Express and EJS. I recommend using Express with Node.js, I hit a wall very quickly without it! EJS helps you to build out a reusable header and footer, just like a php include file if that’s the environment you’re used to. There’s a great link below from Digital Ocean marked ‘How to use EJS” who are the best resource I found to help and teach on this topic.

For example:

<%- include('../partials/header'); %>

I have an app.js file that starts up my local server and sets the environment I need, see the code below for the Express/EJS setup I mentioned.

var express = require('express');
var app = express();
app.set('view engine', 'ejs');

And at the bottom of your app.js file, you’ll be kicking off the server and instructing it which port to use:

app.listen(3000);
console.log('Server is listening on port 3000');

Using terminal on mac, just navigate to the folder your app files are in, right click at the bottom of that display and use terminal to instruct node.js to start and which file its instructions are at (see video above for live demo):

node app.js

In the video above, take note of the static pages functionality, if you’re getting errors trying to reference .css or .js files in your .ejs template, it’s likely you just need to set up that public folder and use it to serve those files from.

app.use(express.static("public"));

Helpful links for learning Node.js / Express / EJS

Conclusion

I really enjoy developing with this stack. Be sure to bookmark this page or give me a Twitter follow @proximowebs as I’ll keep adding to this blog and publish more around my learning and build process with a real life hands-on Node.js project. The best way to learn is to dive in there, that’s what I think anyway, though I’m sure I have many more nights of frustration ahead of me I can already see the light for my actual build and how much more I can get out of my dashboard. It’s nice to do stuff the right way, which is how this feels. :)

Testimonials