Parcel React Setup with HMR and CSS Modules

I like Webpack, its super powerful, but its a headache to setup. I thought I'd give Parcel a go for this React setup. Once you bend your head around some of the more trivial concepts, it was painless to get going. While I still advocate Webpack as a bundle tool, mainly because of its highly customizable interface, Parcel does a great job of making things super easy and blazing fast. 👻

📏 Development

To get started with development:

📋 Clone down the repository

git clone https://github.com/dainemawer/parcel-setup.git my-new-project

💻 Start up your local development server

yarn start

This will spin up a development server at http://localhost:1234 - Hot Module Replacement and CSS Modules ready. This should open up your default browser and display:

It can sometimes take a while on the first run to bundle assets.

💎 Production

🔨 To build assets for the server:

yarn build

📁 Important Folders

🔩 src

• All development work should take place here.
• Add components to the components folder
• Use index.js for components so that you dont need to important single JS files
• Name component CSS after the component.

🔧 dist

• dist is created on the fly. any images, js, css and html are added to this folder with hashed keys for cache busting.
• dist should be deployed to the server.

📃 Important Files

.postcssrc

• Enables CSS Module Support
• Configures Autoprefixer
• Feel free to add more PostHTML plugins here

.posthtmlrc

• Configures a standard PostHTML image plugin that sets width and height on images where width="auto"
• Feel free to add more PostHTML plugins here

.browserslistrc

• Configures what browsers PostCSS / Autoprexifer should support
• Use http://browserl.ist/ to grab easy configurations for this file.

.babelrc

• Configures Babel transpiler plugins, currently it supports react as well as react-hot-loader

Have a 🍺