Kickstart a huge project fast with code splitting!
If you would like a simpler kickstart, see the kickstart-simple project.
Clone this project to start a simple project using Meteor, React.js and Webpack.
git clone https://github.com/thereactivestack/kickstart-hugeapp.gitcd kickstart-hugeappmeteor
When developing a huge application, you don't want to serve the entire JavaScript to the client. You might want to wait before he actually need it. This is the problem code splitting is fixing.
Let's say you have a todo application and an admin panel. Do you really want to serve the admin panel to your regular users? With code splitting, you don't need to. Look at client/AdminApp/index.js code to see how it is working. You can copy / paste the same code to create new sections or sub-sections.
The code that is common to multiple sections will be bundled into common.web.js and automatically loaded by react-router-ssr.
- Code splitting between parts of your application (dynamiclly loaded only once needed)
- Include the simple todo app example
- ES6 modules
- Meteor
- React.js
- react-router with server-rendering (you can disable it by editing
server/entry.js) - Webpack (bundle your app / assets and send them to Meteor)
- Hot-reload with no page refresh in development mode
- Optimize your code in production mode
- Give access to NPM by using packages.json
Webpack needs one webpack.conf.js file for the client and one webpack.conf.js for the server. It allows you to have a better control over the build process. Every other files are not automatically included by Meteor. Everything is starting from your entry point.
The server entry point in the project is at server/entry.js. Everything that you want to load on your Meteor server, they have to be imported or required in some way.
The client entry point in the project is at client/entry.js and work the same way as on the server, except it is run on the browser or Cordova.
You can use any package coming from NPM by adding it to packages.json.
Go look at them, they are simple!
To run or build in production, you need to set your environment variable NODE_ENV to production.
You can use meteor run, meteor build, mup or anything working with Meteor.
NODE_ENV=production meteor run --production
NODE_ENV=production meteor build .
Then, you can run bundle/main.js without it.
We are going to remove this once we have a fix that detect Meteor production mode in a compiler
It seems like the babel plugins are not looking into the correct directory and their is no setting to fix that. However, what you can do is create a symbolic link in your project root to the correct folder:
ln -s packages/npm-container/.npm/package/node_modules
We are going to remove this step once we have a fix