Skip to content
Get packs

Guide · Open source

How to use js-stack-from-scratch: clone, run and learn the stack

Updated · written with AI from the project's own documentation and checked against our catalogue data

js-stack-from-scratch is an MIT-licensed, step-by-step tutorial by verekia that shows how to assemble a modern JavaScript web stack piece by piece, from Node, Yarn and package.json through Babel, ESLint, Flow, Jest, Express, Webpack, React and Redux. It is written for developers who already know JavaScript basics and want to understand what a boilerplate contains and why. After working through it, you will be able to run the example code and follow the chapters to build your own starter project.

JavaScript Stack from Scratchverekia/js-stack-from-scratch · ★ 20.1k · MIT

Quick start

  1. 1Install Node.js and Yarn. Make sure Node.js and Yarn are installed on your computer. These are the prerequisites named in the project.
  2. 2Clone the repository. Run git clone https://github.com/verekia/js-stack-from-scratch to download the tutorial code.
  3. 3Run the examples. Inside the project folder, run yarn && yarn start to install dependencies and start the code examples.
  4. 4Read chapter 01. Start with Node, Yarn and package.json, then move through each chapter in order.
  5. 5Write the code yourself. Follow the step-by-step instructions in each chapter to build the stack from scratch, using the examples to compare.
  6. 6Check the reference boilerplate. Compare your project with the JS-Stack-Boilerplate repository when you finish a chapter.

What you need before you start

The tutorial requires general programming knowledge and JavaScript basics. The clone-and-build route needs Node.js and Yarn installed on your machine. The README says it works on Linux, macOS and Windows.

  • Node.js
  • Yarn
  • Basic JavaScript knowledge

Get the code and run the examples

Clone the repository, then install dependencies and start the examples. Code examples are available for each chapter, and the README says you can run them all with one command.

  • Clone the repository from GitHub.
  • Move into the project folder.
  • Run the examples with yarn && yarn start.
git clone https://github.com/verekia/js-stack-from-scratch yarn && yarn start

Follow the chapters in order

The chapters build on each other. The table of contents lists nine chapters, starting with Node, Yarn and package.json and ending with Travis, Coveralls and Heroku. The README recommends writing everything from scratch yourself by following the step-by-step instructions, using the code examples to check your work.

Each chapter focuses on connecting tools together with the simplest possible example for that tool. The author states that the tutorial does not explain how each tool works individually, so use the linked documentation of each tool when you need depth.

  • 01 - Node, Yarn, package.json
  • 02 - Babel, ES6, ESLint, Flow, Jest, Husky
  • 03 - Express, Nodemon, PM2
  • 04 - Webpack, React, HMR
  • 05 - Redux, Immutable, Fetch
  • 06 - React Router, Server-Side Rendering, Helmet
  • 07 - Socket.IO
  • 08 - Bootstrap, JSS
  • 09 - Travis, Coveralls, Heroku

Use the final boilerplate as a reference

The README links a final code repository, JS-Stack-Boilerplate, and the project releases. A live demo is also linked. Use these to compare your own project against the finished result.

  • JS-Stack-Boilerplate repository (linked from the README)
  • Project releases on GitHub
  • Live demo linked from the README

Know the limits before you build on it

The README notes that the tutorial was last edited in May 2017 and that some libraries have slightly changed their APIs. The author says about 95% is still valid, but if something behaves oddly, check the open bug issues on GitHub.

If you only need to learn React quickly, the README points to create-react-app instead, because this tutorial does not use a pre-made configuration.

What people use it for

  • Understanding what a React and Node boilerplate contains and why each tool is there
  • Building your own starter project without a pre-made configuration
  • Getting up to speed on the stack used by a team before contributing to its codebase
  • Learning how Babel, Webpack and React are wired together in a small example

Frequently asked questions

Is js-stack-from-scratch free to use?

Yes. The project is licensed under the MIT licence, as stated in the README. You can clone the repository and use the code under those terms.

What do I need to install before running js-stack-from-scratch?

The project lists Node.js and Yarn as prerequisites. The README gives the clone command and the command yarn && yarn start to run the examples.

Is js-stack-from-scratch good for complete beginners?

Not really. The README says it requires general programming knowledge and JavaScript basics. If you are just starting, the README suggests learning React with create-react-app first.

Is js-stack-from-scratch still up to date?

The README says the tutorial was last edited in May 2017 and some libraries have changed their APIs since then. The author says about 95% remains valid, so expect to troubleshoot some parts.

What are alternatives to js-stack-from-scratch?

The README recommends create-react-app for learning React quickly with a pre-made configuration. Other comparable projects listed for this item are Vite and Next.js.

Does js-stack-from-scratch work on Windows?

The README states that it works on Linux, macOS and Windows.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use js-stack-from-scratch if you already know JavaScript basics and want to see how a React and Node stack is assembled, or if you are learning what goes into a boilerplate. Pick create-react-app, Vite or Next.js instead if you need a current, maintained starter or only want to learn React quickly.

Install options & downloads