Tutorial: How to set up a JS dev environment

Learn how to work like professional web developers by creating a JavaScript starter kit that you can reuse in all your projects.

We’ll cover the big picture first, to help you understand why you need a JS boilerplate, then we’ll dive into the setup, step by step.

Intro

As a self-taught front end developer with no CS or IT background, I had a hard time understanding why professional developers need so much extra stuff for their work. My project folders included three files: index.html, styles.css and scripts.js, with some extra files in case of multi-page websites.

But that was all, and I couldn’t figure out why real web devs need so many additional tools, like pre-processors, linters, module bundlers or package managers.

I knew that I was missing something, but I just couldn’t put my finger on what it was. So I decided to change my approach to learning and to go back to the big picture. From there on, it all made sense.

Target audience

This module is intended for beginner front end developers who are familiar with HTML, CSS and JavaScript and want to learn how to structure their projects and work more efficiently by using pre-processors, linters, module bundlers and package managers.

By the end of this course, you should have a clear understanding of what a JavaScript boilerplate is, why you need a development environment and how to set it up.

You’ll learn how to work like professional web devs and you’ll be well equipped for a junior role.

What you’ll learn

1. What is a JavaScript development environment?
   1. Dev vs. production environments
   2. Source code vs. production build
   3. What a boilerplate or starter kit is
2. Node and npm for package management
   1. Install Node.js and npm
   2. Understand the package.json file
3. Transpiling your code
   1. What does it mean to transpile your code?
   2. Why do you need a transpiler?
   3. Install Babel for JS transpiling
   4. Configure Babel
4. Module bundling
   1. Install Webpack for module bundling
   2. Configure Webpack for development
   3. Configure Webpack for production
5. Setting up a development web server
   1. Set up a server with Express
6. Task automation
   1. Automate tasks with npm scripts
7. Preparing your code for production
   1. Install ESLint for linting
   2. Sourcemaps
   3. Minification
8. Automating the production build
9. Deploying your project to GitHub pages

What you’ll build

You’ll create your first JavaScript boilerplate with minimum dependencies, so you can reuse it in all your future projects.

Prerequisites

Although the module walks you through the basics of setting up a JS development environment, to get the most out of it you should have basic knowledge of:

• HTML
• CSS
• JavaScript
• Git
• How to use an IDE