Musket is fully prepped for React.js development. Here’s how to get up and running with one or more React.js Single Page Apps (SPAs) inside your Musket WordPress / Genesis site.
Decide where the app is going to live
Create a new custom page template. You can use the
template-react-test.php example that comes with Musket as a guide.
You may want to remove the header, navigation or other sections of your standard page template that you either don’t need, or will be rebuilding with React components in the React part of your site.
inc/scripts-and-styles.php so it enqueues
bundle.js on your new page template.
Build your app
Your app is housed under
src/app/. There is a suggested folder structure already set up in Musket, which is used to build the sample todo app. It uses Redux and follows its methodology. You can use this if you like, or feel free to nuke the app directory and build your React SPA any way you like.
React development workflow
If it’s not already running, start Gulp by typing
gulp in your command line.
You should now have your local dev site up and running at
http://localhost:3000. BrowserSync will live reload any changes you make to Sass or PHP files or to JS files in the
A Webpack development server will also be running as middleware in our BrowserSync stack. It will be watching for any changes to JS or JSX files in the
src/app directory. The server is running in ‘hot’ mode, so when changes are detected, it will inject just those changes into the part of the page that needs updating. This is known as Hot Module Replacement and it’s a game-changer… because the page isn’t refreshed, you don’t lose state.
Those transpiled JS files are then bundled into a single file along with all of our React and other dependencies The file is at:
This is the file we enqueued in
Publish your app
Now the above is only true of our development server. Our Webpack Dev Server middleware only bundles the
bundle.js file in memory – it’s not served off your disk. This is to ensure the Hot Module Replacement can work. Before you push your site to it’s production server you need to run a single command from the terminal:
bundle.js and properly writes it to disk, where it can be uploaded with the rest of your site.
And that’s it. As usual, Musket automates away the tedious work and leaves you with the fun of building your app!