Building a JavaScript Development Environment

Visit Tutorial Page ( Report)

Hello! My name is Cory, and 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 Overview
    • Course Overview
  • You Need a Starter Kit
    • You Need a Starter Kit
    • A Starter Kit Is an Automated Checklist
    • Who Is This Course For?
    • What Belongs in Your Starter Kit?
    • Set Up Github
    • Agenda
    • Summary
  • Editors and Configuration
    • Intro
    • What To Look For in a JavaScript Editor
    • JavaScript Editor Recommendations
    • Editorconfig
    • Demo: Editorconfig
    • Summary
  • Package Management
    • Intro
    • Package Managers
    • Demo: Install Node and npm Packages
    • Package Security
    • Demo: Node Security Platform
    • Summary
  • Development Web Server
    • Intro
    • Development Web Servers
    • Demo: Set up Express
    • Sharing Work-in-progress
    • Demo: Sharing Work-in-progress
    • Summary
  • Automation
    • Intro
    • Automation Options
    • Demo: npm Scripts
    • Demo: Pre/Post Hooks
    • Demo: Create Security Check and Share Scripts
    • Demo: Concurrent Tasks
    • Summary
  • Transpiling
    • Intro
    • JavaScript Versions
    • Transpilers
    • Babel Configuration
    • Transpiling Build Scripts
    • Demo: Set Up Babel
    • Summary
  • Bundling
    • Intro
    • Module Formats
    • Why ES6 Modules?
    • Choosing a Bundler
    • Demo: Configuring Webpack
    • Demo: Configure Webpack with Express
    • Demo: Create App Entry Point
    • Demo: Handling CSS with Webpack
    • Sourcemaps
    • Demo: Debugging via Sourcemaps
    • Summary
  • Linting
    • Intro
    • Why Lint?
    • Linters
    • ESLint Configuration Decisions Overview
    • Decision 1: Configuration File Format
    • Decision 2: Which Rules?
    • Decision 3: Warnings or Errors?
    • Decision 4: Plugins?
    • Decision 5: Preset
    • Watching Files with ESLint
    • Linting Experimental Features
    • Why Lint Via an Automated Build?
    • Demo: ESLint Set Up
    • Demo: Watching Files
    • Summary
  • Testing and Continuous Integration
    • Intro
    • Test Decisions Overview
    • Decision 1: Testing Framework
    • Decision 2: Assertion Libraries
    • Decision 3: Helper Libraries
    • Decision 4: Where To Run Tests
    • Decision 5: Where Do Test Files Belong?
    • Decision 6: When Should Tests Run?
    • Demo: Testing Setup
    • Demo: DOM Testing
    • Demo: Watching Tests
    • Why Continuous Integration?
    • What Does Continuous Integration Do?
    • Choosing a CI Server
    • Demo: Travis CI
    • Demo: Appveyor
    • Summary
  • HTTP Calls
    • Intro
    • HTTP Call Approaches
    • Centralizing HTTP Requests
    • Demo: Fetch
    • Selective Polyfilling
    • Why Mock HTTP?
    • How to Mock HTTP
    • Our Plan for Mocking
    • Mocking Libraries
    • Demo: Creating a Mock API Data Schema
    • Demo: Generating Mock Data
    • Demo: Serving Mock Data via JSON Server
    • Demo: Manipulating Data via JSON Server
    • Summary
  • Project Structure
    • Intro
    • Why a Demo App?
    • Tip 1: JS Belongs in a .js File
    • Tip 2: Consider Organizing by Feature
    • Tip 3: Extract Logic to POJOs
    • Summary
  • Production Build
    • Intro
    • Minification and Sourcemaps
    • Demo: Production Webpack Configuration with Minification
    • Demo: Configure Local /dist Server
    • Demo: Toggle Mock API
    • Demo: Production Build npm Scripts
    • Dynamic HTML Generation
    • Demo: Dynamic HTML Generation
    • Bundle Splitting
    • Demo: Bundle Splitting
    • Cache Busting
    • Demo: Cache Busting
    • Demo: Extract and Minify CSS
    • Error Logging
    • Demo: Error Logging
    • Demo: HTML Templates via EmbeddedJS
    • Summary
  • Production Deploy
    • Intro
    • Separating the UI and API
    • Cloud Hosting
    • Demo: Automated API Deploy via Heroku
    • Demo: Automated UI Deploy via Surge
    • Starter Kit Update Approaches
    • Option 1: Yeoman
    • Option 2: Github
    • Option 3: npm
    • Inspiration
    • Challenge
    • Summary
  • Course Overview
    • Course Overview
Write Your Review

Reviews

atieh mokhtari
atieh mokhtari

it was the most complete course I've had in my learning process. the parts are 3 to 5 minutes in average which is really good for not getting tired of. also the expalanations are complete and very clean and smart coding would be experienced after completi... show more

1 0 (Report)