Skip to content

JavaScript Stack from Scratch

A step-by-step tutorial for wiring together a modern JavaScript web stack by hand.verekia/js-stack-from-scratch

Stars
20.1k
Forks
1.9k
Licence
MIT
Language
JavaScript
Last update
2.4 years ago
Type
Learning resource

No commits in over a year — check for forks or alternatives before adopting.

What it is

This is a tutorial that walks you through assembling a JavaScript web stack piece by piece, from Node, Yarn and package.json through Babel, ESLint, Flow, Jest, Express, Webpack, React, Redux, server-side rendering and Socket.IO. It focuses on connecting tools together with the simplest possible example for each, rather than teaching each tool in depth. People use it to understand what a boilerplate contains and why, or to build their own starter project from scratch.

  • Follow the chapters to build a Node and Yarn project with Babel, ESLint and Jest configured
  • Work through the Webpack and React chapter to set up hot module replacement
  • Study the Redux and Immutable chapter to see how state management is wired together
  • Use the final boilerplate code from the linked repository as a reference project

Great for

  • Developers who already know JavaScript basics and want to understand how a React and Node setup is put together
  • People who want to learn what goes into a boilerplate instead of using a pre-made configuration
  • Developers joining a team that uses this kind of stack and need to see the pieces
  • Learners who prefer following written chapters that build on each other

Not ideal for

  • Complete beginners, since the README says it requires general programming knowledge and JavaScript basics
  • People who just want to learn React quickly; the README points to create-react-app for that
  • Anyone needing a current, maintained starter, since the README notes some libraries have changed APIs since the tutorial was last edited in May 2017
Step-by-step guide: how to use JavaScript Stack from ScratchInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Clone and build from source

    You'll need: Node.js · Yarn

    Clone the repository

    git clone https://github.com/verekia/js-stack-from-scratch

    Run the code examples

    yarn && yarn start
  2. 2

    Run it

    • Clone the repository to your machine
    • Follow the chapters in order, starting with 01 - Node, Yarn, package.json
    • Or run the code examples for each chapter with yarn && yarn start
    • Compare your result with the final boilerplate repository linked in the README
  3. 3

    Get the most out of it

    • Write each chapter's code yourself, as the README recommends, rather than only running the examples
    • Check the open bug issues on GitHub if a step behaves differently from the text
    • Use the no-services boilerplate zip from the latest release if you want a starting point without the extra services
    • Read the CHANGELOG to see what changed between versions before following the old steps

Downloads

Strengths

  • Explains how tools are wired together rather than hiding the configuration
  • Each chapter gives a minimal, focused example
  • Code examples are provided for each chapter and the final code is available in releases

Trade-offs

  • The README says the tutorial was last edited in May 2017 and some libraries have changed APIs since then
  • Covers several tools that may now be outdated, and the README lists the V2 chapters as the current version
  • Many chapters are required reading in sequence, so it is not a quick reference

How it compares

ProjectStarsTypeLevelUpdatedBest for
js-stack-from-scratch (this)20.1kLearning resourceintermediate2.4 years agoDevelopers who already know JavaScript basics and want to understand how a React and Node setup is put together
create-react-app103kDev toolbeginner1.7 years agoFollowing an existing React tutorial that uses Create React App
vite83.7kDev toolintermediate4 days agoFrontend developers starting a new modern web project
next.js143kFrameworkintermediate4 days agoDevelopers already comfortable with React who want a full framework around it
front-end-guide15.2kLearning resourcebeginner3.4 years agoBack end engineers joining a team that works on web apps
react-redux-typescript-guide13.3kLearning resourceintermediate6 months agoDevelopers who already know React and want to add TypeScript to an existing app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.