A minimum viable React app with Parcel Bundler
What's inside?
parcel-bundlerreactreact-dombabel-preset-react-appautoprefixer
Clone and install deps
git clone [email protected]:jaredpalmer/react-parcel-example.git
cd react-parcel-example
yarn
yarn start
Then open http://localhost:1234 and edit index.js and press save. Parcel
will automagically hot reload you files whenever you make changes.
npm run build
This will compile your JS and copy your index.html to the dist folder which
you can deploy wherever as a good ol' webpage.
Parcel uses PostCSS plugins to manage CSS assets.
I've included autoprefixer for vendor prefixing with the same setup as
create-react-app. You can find and modify the PostCSS setup in package.json.
If you'd rather keep your PostCSS setup in a dotfile, you can delete the
postcss key from package.json, and place its contents in a .postcssrc file
too.
Keeping everything in the root directory obviously won't scale past a point. Parcel is very flexible about folder structure, but there are a few gotchas.
When you do move index.js just make sure to update the <script> tag in
index.html so that it points to the correct relative path.
For example, if you want to move index.js to src/index.js, you would need
make the following change to index.html:
< <script src="./index.js"></script>
---
> <script src="./src/index.js"></script>
If you want to move index.html, you will need to update your npm scripts in
package.json with the new relative path.
Refer to the deployment guide in create-react-app, just note that you will
need to account for the fact that Parcel builds out to a dist directory, while
CRA builds to a build directory. You can make it identical by adding
--out-dir build to both start and build npm tasks in package.json.