This is a lean React project that demonstrates how to create a 2 pages SPA and bundle it using Fuse-box instead of the well-known Webpack.
Here is what you get by checking this project out:
- HMR (Hot Module Replacement) & Dev Server
- Routes (react-router)
- Stylus (with @import / @require)
- SVG
- Custom fonts (self-hosted fonts)
- Containers and Components (pure stateless component)
- JSX
- Bundling (using Fuse-box)
This project DOES NOT HAVE server-side rendering. This SPA (Single Page Application) is a great fit for projects like Admins.
- To use relative paths inside stylesheets (custom fonts / images) is not trivial.
- It's tricky to use
@importand@requirein Stylus. - You need to activate the Cache in order to HMR make effect whenever you change the JSX.
Read the fuse.js file to fully understand what I mean.
It's necessary to install Fuse-box as a dev dependency. It's up to you to install it globally or not.
npm install fuse-box -g
Install dependencies:
yarn install
For a fresh install, use this:
rm -rf node_modules && yarn cache clean && yarn install
Start the dev server created by Fuse-box by typing:
npm start
If you want to expose your local project to the world, I'd recommend using Ngrok and then npm run expose to expose the default port 9005.
This project uses Express as a dependency to create the Dev Server used by Fuse-box. Feel free to make changes to better suit your use-case and own preferences.