# Setting Up a Bare-Bones JavaScript Web App with React, Webpack, and Scaffolding Tools

DevFeed: [Setting Up a Bare-Bones JavaScript Web App with React, Webpack, and Scaffolding Tools](<https://devfeed.tech/articles/how-to-set-up-a-modern-web-app-and-stay-sane-38420.md>)

Original publisher: [Read original article](<https://khmylov.com/2015/02/build-web-app-and-survive/>)

Author: Andrew Khmylov

Published: 2015-02-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [Despite the odds](<https://devfeed.tech/sources/despite-the-odds.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [React](<https://devfeed.tech/topics/react.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Dependency management](<https://devfeed.tech/topics/dependency-management.md>), [Boilerplate](<https://devfeed.tech/topics/boilerplate.md>)

Tags: [boilerplate](<https://devfeed.tech/tags/boilerplate.md>), [dependency-management](<https://devfeed.tech/tags/dependency-management.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>)

## AI overview

A practical guide to setting up a bare-bones JavaScript web app on Windows. It discusses using React for interactive interfaces, module systems and dependency management, webpack for bundling code and assets, and scaffolding tools such as Yeoman.

## Source excerpt

Long story short, I had to create a modern web app. Actually, it was an HTML page prototype for our new feature. Basic layout and a fairly complex JavaScript to check our design and interaction ideas. I've been doing a lot of web development during the last 2 years, but it was mostly about extending the existing long-running project. The opportunity to learn how to set up a completely new solution sounded too tempting too miss it. Side note: I was going to write a rant-like blogpost initially. However, the final text turned out to be more like a guide than a bunch of complaints. So you actually may think about it as a from-zero-to-infinity guide to setting up a bare-bones JavaScript web app and its accompanying infrastructure on Windows. Baby steps I start with a simple index.html. Since it's going to be mostly about interactive interfaces, and I don't want to spend that much time thinking about boilerplate markup and event handling, I'm going to build it with React.js. Even though the codebase is not going to be that huge, I probably also want a proper module system. OK, we've been using Require.js for quite a long time now, so it looks like a reasonable choice. Just put a <script> with the reference to the main JS file into index.html. Obviously, I don't want to download the libraries manually, so I'm going to pick Bower for dependency management. Ask the colleague whether I'm doing everything right, just in case. Maybe there is a better way, you know.. Well, actually, it turns out that the cool guys use webpack these days. All right, let's check it out. Webpack is an advanced module bundling system which takes your code modules and assets and bundles them together with 3rd party libraries, transforming them on the way (for example, from one language to another) and packing for the optimal performance. Sounds good. But don't rush to nail the getting start guide--the cool guys don't do that nowadays. Why write any bootstrapping code at all when you can reuse the boi