A minimum viable Fabric-UI React app with Parcel Bundler
What's inside?
parcel-bundlerreactreact-domoffice-ui-fabric-reactbabel-preset-react-appautoprefixer
Also If you need the TypeScript version please let me know...
Clone and install deps
git clone [email protected]:muraray/fabric-ui-react-parcel.git
cd fabric-ui-react-parcel
yarn
yarn start
Rest of the story is taken care by the Parcel bundler.
Open the http://localhost:1234 and edit index.js and press save. Parcel
will automagically hot reload you files whenever you make changes.
yarn build
This will compile all the *.js files and copy your index.html to the dist folder which
you can deploy wherever even in old webpages (hope react works lol ;) ).
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.