How to get started with Frontend Tooling using Node & NPM

I'm a frontend person. I develop user experiences to navigate through content. I organize content into scannable navigation and I create shiny UI and interactive views that gives the website or webapp that little extra.

Martin Muzatko Written by Martin Muzatko
on

But I always avoided that huge intimidating topic that is NPM/Node/Task Runner. "Bullshit!" I said. Why would I need a gigantic server setup just to compile less? All I need is my nice client-side less parser and I'm all set. I just have to copy the resulting css, once I'm done with developing.

But when are you done with development? As a typical CMS Frontend Dev, your workflow should stop when you upload the complete theme to the webspace of your choice and everybody is happy.

This is not reality.

After you're finished with your hard work, your client notices: "Oh! We need support for Internet Explorer 9! You are developer so that should be no problem - right?" Spend sleepless nights of handpicking the required prefixes on on can i use. Or just use prefixfree and hope that works out. Oh and if you are sick about manually reloading the browser after every change, maybe you set up livereload if you bare with the setup. Perhaps you also want to avoid that old Javascript Syntax and turn ES6 into browser readable code to stop wasting time on thinking what syntax is supported by which browser.

You will find yourself covered in a semi build tool setup that is tough to keep together. Similar to what I had before I learned to embrace new tools like NodeJs. It may be within your comfort zone, because you work only on the client-side. But you have to deal with the various setup steps for every project. Worst of all: You run out of time to finish your job.

You need a build system that takes care about all the repeating labor. Increasing your performance and the performance of your project by minifying your compiled css and js within seconds. You shouldn't worry about your current development step so you can properly repair broken stuff even after your launch. Especially if you are in a rush to fix the latest bug and all that keeps you from shipping that fix is your manual update process.

What you will learn in this article

  • Getting used to the command line
  • Smartly managing packages via npm
  • Using node and webpack to automate your labor
  • Growing the mindset of automating

What is npm and Node and Gulp and why are they so important?

I only discovered all these helpful tools just a couple of months ago. If you are part of a tiny startup or even alone, it is tough to find out about how to use all these tools. You just can't afford to have an easier developer life. Or even find out what these tools are about. When everyone else is handtyping their CSS or edits already preprocessed CSS and you have to piece together the changes like an all-seeing eye, it is time to automate the manual labor. You are not to blame, command line tools aren't sexy, but they do their job amazingly fast.

Comparing current build tools

tool stars issues
webpack webpack.svg?style=social webpack.svg?style=social
grunt gulp.svg?style=social gulp.svg?style=social
gulp grunt.svg?style=social grunt.svg?style=social
brunch brunch.svg?style=social brunch.svg?style=social
broccoli broccoli.svg?style=social broccoli.svg?style=social

NPM is a recipe organizer or dependency manager. Rather than manually including all your required libraries and build processes, you tell npm to create a recipe and npm downloads and installs the ingredients. NPM has access to all the open source packages that people host on npmjs.org. Packages can contain libraries, frameworks, build tools, CLI tools. Even css files like normalize.css can be installed with npm.

Gulp is your second handy cook or task runner - part of your build system. You can tell it to minify css, preprocess less or sass, reload the page after you saved a file. Pretty much anything that you need to do manually without a build system. Gulp is just one example of task runner. These runners work on the serverside, because they have to interact with your system. E.g.: Move files around. This can't be done client-side. But we can use Javascript for backend tasks for this. Webpack is great at describing how this works:

Node starts servers where your task runner can be executed on. A cook is nothing without his kitchen. It gives all your tools access to your project filesystem and the browser via serverside javascript. Node also makes it possible to livereload your pages across several devices at the same time. If thats not enough, with browsersync you can even sync UI interactions across multiple devices, even scrolling! We need plugins for this, though. Node can carry these events across browsers.

I'm afraid of the commandline, I need some handholding

Good news: The CLI tools work on any system and Node got even Windows users covered with their own interface. Don't worry too much about the console though, most of the time you'll hang out in your comfortzone - your editor. Because you need the commandline only for a few easy to remember commands.

Download the latest version of NodeJs and install it.

For Windows users:

The Node CLI comes with linux-style commands for Windows users. So you can use ls for listing files. Also, you want to execute the Node.js command prompt, not Node.js as the icon would conclude. It took me some time to figure this out the first time I installed node.

No matter in what step of your project you are, you can always add a build system. Windows user have to navigate to their project In the Node commandline go to your project folder with cd folder/path/project or, if you have Git Bash installed, you can just navigate to your project via Explorer and then just open the context menu > Git Bash here. Which will also have access to the npm commands.

Initiate your project

It is as simple as typing

This will guide you through a setup which you can just skip (Press Enter 10 times). This will create a package.json so you can change all that information in your editor afterwards.

Installing Dependencies

In npm, there are four different install commands. I'll explain why they exist and what they do.

#1 Packages you need in your project directly

BASH
npm i -S normalize.css

$ npm i -S normalize.css
example@1.0.0 c:\Users\Martin\example
└── normalize.css@4.1.1 

Martin@Martin ~/example
$ cat package.json
{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "normalize.css": "^4.1.1"
  }
}

You can ignore the warnings, but look! npm automatically added riot to your dependencies in the package.json of your project.

#2 Installing all packages from a package.json file

This is important when you pass your project to other guys on your team or via git or when you download sources that contain a package.json file. You don't have to upload all your packages. You only have to share your package.json and npm knows exactly what to install. If you pass such recipes like the package.json, others can install them via npm i. Which is the second install command.

#3 Packages you need for development

Some packages come with additional command line tools. How do you know if you have to install it globally? Usually, build tools are installed globally npm i -g browser-sync. However, the vendor usually always includes information on how to use and install such plugins.

#4 Plugins and Processors for development

Plugins for the dev process, for example less compiler, autoprefixer and es6 (babel) are installed as devDependencies. npm i -D less.

More information can be found on this handy stackoverflow answer.

I know the CLI, but what build tools should I use now?

There is a vast array of build tools. Grunt, Gulp, Webpack and Browserify just to name a few. Currently, Gulp and Webpack seem to be one of the most sophisticated ones to cover about any frontend workflows. With webpack requiring the least configuration and to easily setup build tasks.

To get you started, there are lots of project hosted on Github to get your favorite framework/library to run with various build tools.

Riot

There is so much help scattered around for you to discover. All you need to know is how to use npm to install your tools and then configure them. On the long run, this is definately worth the time rather than manual setups. Usually you can find these packages/plugins via github or npmjs. All you have to do is read manuals and use the plugins accordingly. If you are stuck and everything else fails - don't get frustrated. People on Gitter (Github project chats) are more than happy to help you and so am I.

Stop wasting your precious time

As frustrated I was myself to grasp what npm node and all these task runner are about. You will discover that they just there to help you!

Install npm i -g webpack and npm i -g webpack-dev-server. Automation is just a few lines of configuration away. If you can't wait for my next post, you can already read through their official tutorial.

Next up

I'll get more into detail how webpack works and how to set it up. I haven't blogged for a solid 4 months now, a new job kept me busy. Keep your eyes peeled for updates.

Do you need inspiration how to solve those tricky issues? Issues that when resolved once and for all, would ease a lot of daily user interface interaction.

Get on my list! You are invited to reply to any email with your important questions and get a hand-crafted reply with hands-on guides. You will learn how to solve your individual use-cases. Fill in your name below and get in touch today :) . It is about a nice conversation from developer to developer after all.

See other articles

Check username and email availability without a page refresh

Learn how to implement asynchronous form validation for your projects. This allows feedback before tedious forms are completed

Using noUiSlider as range slider to filter between two numbers

Do you know these fancy range sliders that can filter items with the blink of an eye? You move around a handle and get the desired results right away. In this article, you are going to learn how to implement a range slider to filter your data.

How to group together filter inputs to obtain and combine their values

When you want to filter a set of products or other lists, naturally you have to think how you could wire together the variety of filters. With this article, you will learn how you can retrieve the data and combine the values to filter your items in real-time.

Becoming a zombie

Do you find yourself losing track of time again? Without really knowing, a year passed. As day for day you continue your work, you had some random bursts of motivation, but you know that these kind of motivation spikes won't get you anywhere in the long term.

See all Articles