20.1K ·GitHub
What is this?
A step-by-step tutorial that assembles a modern JavaScript web app stack from scratch — from Node and Yarn through React, Redux, and server-side rendering up to deploying on Heroku.
A step-by-step tutorial that assembles a modern JavaScript web app stack from scratch — from Node and Yarn through React, Redux, and server-side rendering up to deploying on Heroku.Is this a framework or a library I can install?Neither — it is a written tutorial. Each chapter has runnable code examples, and the final result lives in a separate JS-Stack-Boilerplate repo, so you end up with your own boilerplate.
Neither — it is a written tutorial. Each chapter has runnable code examples, and the final result lives in a separate JS-Stack-Boilerplate repo, so you end up with your own boilerplate.How do I work through it?Write the code yourself, following the nine step-by-step chapters. Every chapter ships a runnable example — yarn && yarn start gets it going — and everything works on Linux, macOS, and Windows.
Write the code yourself, following the nine step-by-step chapters. Every chapter ships a runnable example — yarn && yarn start gets it going — and everything works on Linux, macOS, and Windows.Do I need to be an experienced JavaScript developer to follow it?General programming knowledge and JavaScript basics. The tutorial deliberately skips how each tool works internally — it is about wiring them together, so check each tool's docs for depth.
General programming knowledge and JavaScript basics. The tutorial deliberately skips how each tool works internally — it is about wiring them together, so check each tool's docs for depth.Is the tutorial still current, or has it aged?It was last edited in May 2017, so a few libraries have slightly changed their APIs. The author estimates 95% is still valid and points to the open issues when something looks off.
It was last edited in May 2017, so a few libraries have slightly changed their APIs. The author estimates 95% is still valid and points to the open issues when something looks off.Is this overkill for a small site, or meant for bigger apps?It targets web apps that scale. For a simple page with a bit of JS the README says Browserify/Webpack + Babel + jQuery is enough, so the full stack would be overkill there.
It targets web apps that scale. For a simple page with a bit of JS the README says Browserify/Webpack + Babel + jQuery is enough, so the full stack would be overkill there.Why assemble the stack by hand instead of using create-react-app?The README actually recommends create-react-app if you just want to learn React quickly. This tutorial takes the opposite approach: no pre-made config, so you understand everything happening under the hood.
The README actually recommends create-react-app if you just want to learn React quickly. This tutorial takes the opposite approach: no pre-made config, so you understand everything happening under the hood.Which tools does the stack cover?Nine chapters: Node/Yarn; Babel, ESLint, Flow, Jest, Husky; Express, Nodemon, PM2; Webpack, React, HMR; Redux, Immutable, Fetch; React Router, SSR, Helmet; Socket.IO; Bootstrap, JSS; Travis, Coveralls, Heroku.
Nine chapters: Node/Yarn; Babel, ESLint, Flow, Jest, Husky; Express, Nodemon, PM2; Webpack, React, HMR; Redux, Immutable, Fetch; React Router, SSR, Helmet; Socket.IO; Bootstrap, JSS; Travis, Coveralls, Heroku.Can I skip to the finished result instead of typing everything?Yes — the final code is in the separate JS-Stack-Boilerplate repo and in the releases, plus a live demo. The author still recommends typing everything yourself, chapter by chapter.
Yes — the final code is in the separate JS-Stack-Boilerplate repo and in the releases, plus a live demo. The author still recommends typing everything yourself, chapter by chapter.Is the tutorial available in other languages?Yes — V2 has community translations in Bulgarian, Chinese (simplified), French, Italian, and Polish; the older V1 was also translated into Japanese, Russian, and Thai.
Yes — V2 has community translations in Bulgarian, Chinese (simplified), French, Italian, and Polish; the older V1 was also translated into Japanese, Russian, and Thai.What are similar projects?react-redux-starter-kit, react-redux-universal-hot-example, front-end-guide, jstraining, TypeScript-React-Starter, react-redux-typescript-guide, react-redux-links, nodebestpractices
react-redux-starter-kit, react-redux-universal-hot-example, front-end-guide, jstraining, TypeScript-React-Starter, react-redux-typescript-guide, react-redux-links, nodebestpracticesWhich topics is it in?react-router, flow, yarn, socket-io, heroku, server-side-rendering, jest, eslint, bootstrap, es6, redux, unit-testing
react-router, flow, yarn, socket-io, heroku, server-side-rendering, jest, eslint, bootstrap, es6, redux, unit-testing