Building a JavaScript Development Environment

By Cory House
Starting a new JavaScript project from scratch is overwhelming. This course provides a playbook outlining the key decisions you need to make. Build a robust development environment that handles bundling, linting, transpiling, testing, and much more.
Play course overview
Course info
Rating
(684)
Level
Beginner
Updated
Mar 16, 2021
Duration
4h 54m
Table of contents
Course Overview
Course Overview 2m
You Need a Starter Kit
You Need a Starter Kit 3m A Starter Kit Is an Automated Checklist 3m Who Is This Course For? 5m What Belongs in Your Starter Kit? 1m Set up Github 3m Agenda 4m Summary 1m
Editors and Configuration
Intro 1m What to Look for in a JavaScript Editor 3m JavaScript Editor Recommendations 2m Automating Formatting 2m Demo: Editorconfig 2m Summary 1m
Package Management
Intro 1m Package Managers 1m Demo: Install Node and npm Packages 4m Package Security 1m Demo: npm audit 1m Summary 1m
Development Web Server
Intro 1m Development Web Servers 4m Demo: Set up Express 4m Sharing Work-in-progress 6m Demo: Sharing Work-in-progress 4m Summary 1m
Automation
Intro 1m Automation Options 5m Demo: npm Scripts 2m Demo: Pre/Post Hooks 2m Demo: Create Share Script 1m Demo: Concurrent Tasks 2m Summary 1m
Transpiling
Intro 1m JavaScript Versions 2m Transpilers 4m Babel Configuration 2m Transpiling Build Scripts 1m Demo: Set up Babel 4m Summary 1m
Bundling
Intro 1m Module Formats 2m Why ES6 Modules? 2m Choosing a Bundler 6m Demo: Configuring Webpack 4m Demo: Configure Webpack with Express 2m Demo: Create App Entry Point 3m Demo: Handling CSS with Webpack 2m Sourcemaps 1m Demo: Debugging via Sourcemaps 2m Summary 1m
Linting
Intro 1m Why Lint? 2m Linters 1m ESLint Configuration Decisions Overview 1m Decision 1: Configuration File Format 1m Decision 2: Which Rules? 0m Decision 3: Warnings or Errors? 2m Decision 4: Plugins? 1m Decision 5: Preset 2m Watching Files with ESLint 2m Linting Experimental Features 1m Why Lint via an Automated Build? 1m Demo: ESLint Set Up 7m Demo: Watching Files 2m Summary 1m
Testing and Continuous Integration
Intro 1m Test Decisions Overview 2m Decision 1: Testing Framework 2m Decision 2: Assertion Libraries 1m Decision 3: Helper Libraries 1m Decision 4: Where To Run Tests 1m Decision 5: Where Do Test Files Belong? 3m Decision 6: When Should Tests Run? 3m Demo: Testing Setup 5m Demo: DOM Testing 3m Demo: Watching Tests 1m Why Continuous Integration? 2m What Does Continuous Integration Do? 1m Choosing a CI Server 1m Demo: Travis CI 6m Demo: Appveyor 3m Summary 2m
HTTP Calls
Intro 1m HTTP Call Approaches 4m Centralizing HTTP Requests 1m Demo: Fetch 7m Selective Polyfilling 1m Why Mock HTTP? 1m How to Mock HTTP 4m Our Plan for Mocking 2m Mocking Libraries 3m Demo: Creating a Mock API Data Schema 3m Demo: Generating Mock Data 3m Demo: Serving Mock Data via JSON Server 6m Demo: Manipulating Data via JSON Server 5m Summary 2m
Project Structure
Intro 1m Why a Demo App? 2m Tip 1: JS Belongs in a .js File 4m Tip 2: Consider Organizing by Feature 1m Tip 3: Extract Logic to POJOs 2m Summary 1m
Production Build
Intro 1m Minification and Sourcemaps 1m Demo: Production Webpack Configuration with Minification 2m Demo: Configure Local /dist Server 3m Demo: Toggle Mock API 3m Demo: Production Build npm Scripts 2m Dynamic HTML Generation 2m Demo: Dynamic HTML Generation 4m Bundle Splitting 1m Demo: Bundle Splitting 4m Cache Busting 2m Demo: Cache Busting 3m Demo: Extract and Minify CSS 2m Error Logging 2m Demo: Error Logging 4m Demo: HTML Templates via EmbeddedJS 4m Summary 1m
Production Deploy
Intro 1m Separating the UI and API 2m Cloud Hosting 1m Demo: Automated API Deploy via Heroku 9m Demo: Automated UI Deploy via Surge 3m Starter Kit Update Approaches 1m Option 1: Yeoman 1m Option 2: Github 0m Option 3: npm 3m Inspiration 1m Challenge 1m Summary 1m
Description
Course info
Rating
(684)
Level
Beginner
Updated
Mar 16, 2021
Duration
4h 54m
Description

Welcome to Building a JavaScript Development Environment. In this course, you will explore the long list of decisions and patterns for building your own JavaScript development from scratch using modern tooling. You will get there by learning about major topics like transpiling, bundling, testing, and npm scripts for automation.

By the end of this course, you will be able to create a rapid feedback JavaScript development experience that suits your team's unique preferences.

Before you begin, make sure you are already familiar with JavaScript and HTML.

After this course, you'll be ready to move on to building applications in a wide array of technologies including Angular, React, Node.js, and Electron.

I hope you'll join me, and I look forward to helping you on your learning journey here at Pluralsight.

Course FAQ
Course FAQ
What will I learn in this course?

In this course, you will learn to create a rapid feedback JavaScript dev environment and be ready to build apps in a variety of different technologies.

What software is required?

You will want to download Git and have an account. You will also need a JavaScript editor. If you don't already have a favorite, we will discuss how to select an editor that meets your needs.

What prerequisites are needed?

You will need to be already familiar with JavaScript and HTML.

What is a JavaScript development environment used for?

Building a JavaScript development environment means that you don't have to start every new project from scratch. You will have a solid foundation customized to your specific needs.

Who is this course for?

This course is for developers and teams looking for a reusable JavaScript environment that supports automated testing, bundling, linting, error logging, and more.

About the author
Cory House
About the author

Cory is an independent consultant with over 15 years of experience in software development. He is the principal consultant at reactjsconsulting.com and a Microsoft MVP.

More from the author
Managing React State
Intermediate
5h 5m
Aug 20, 2020
React: The Big Picture
Beginner
1h 10m
May 11, 2020
More courses by Cory House
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Ah, JavaScript. It's so easy to get started. Wait, no it's not, it's overwhelming. Now sure, today, more of us are writing JavaScript than ever before, and if you've been coding for long, you may recognize the value of testing, linting, bundling, transpiling, automated builds, and more, but all too often, we ignore many of these items. Why? Because setting up a solid JavaScript development environment is so much work. The list of choices is so long and complex that it's hard to know even where to get started. Hi, I'm Cory House, and I'm here to help. I've been building rich web applications in JavaScript for over 15 years now, and frankly I'm tired of starting from scratch. So in this course, I propose a solution. What if your team had a powerful, rapid feedback development environment? What if every time you started a new project, you had a solid foundation that supported automated testing, bundling, linting, transpiling, error logging, and so much more out of the box? That's the goal of this course. Let's stop starting from scratch. Let's build a JavaScript starter kit so your team can rapidly get started and enjoy all the benefits of a modern, powerful, and automated development experience. A great JavaScript development environment makes doing the right thing the easy thing. In this course, we'll make it happen.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT