Building a JavaScript Development Environment
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.
What you'll learn
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.
Table of contents
- 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
- 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
- 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
- Intro 1m
- Minification and Sourcemaps 1m
- Demo: Production Webpack Configuration with Minification 4m
- 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 2m
- Demo: HTML Templates via EmbeddedJS 4m
- Summary 1m
Course FAQ
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.
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.
You will need to be already familiar with JavaScript and HTML.
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.
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 is the principal consultant at reactjsconsulting.com, where he has helped dozens of companies transition to React. Cory has trained over 10,000 software developers at events and businesses worldwide. He is a seven time Microsoft MVP, and speaks regularly at conferences around the world. Cory lives in Kansas City and is active on Twitter as @housecor.