Explanation of how the Crater framework works

Crater.md

Crater

This is an attempt to document the internals of Crater (https://github.com/jedwards1211/crater). It's most likely out of date at any given time. I used to it to gain a better understanding of how Crater was put together.

Updated: Sept 16. 2016

Special Folders

• src/server - App reloads if anything changes.
• src/universal - App reloads if anything changes.

Development Mode

Run npm start runs babel-node scripts/start.js.

scripts/start.js

1. Runs buildMeteor() from scripts/build-meteor.js.
2. Builds meteor files if out of date.
3. Runs installMeteorDeps() from scripts/installMeteorDeps.js.
4. Installs meteor npm dependencies.
5. Require's scripts/devServer.js.
6. Using supervisor runs src/index.js and reloads the application if anything changes under src/server or src\universal. (These are files loaded on the server).

scripts/devServer.js

1. Loads environment from .env file.
2. Creates an express app.
3. Using the config from webpack/webpack.config.dev.js creates a webpack compiler.
4. Configures the express app with two middlewares:
5. webpack-dev-middleware – Serves the output from webpack over a connect server. * Uses the webpack compiler previously created and the devServer property of the webpack config.
6. webpack-hot-middleware – Subscribes to changes from the server and executes them using webpack's HMR api. * Uses the same webpack compiler.
7. Creates a HTTP proxy to pipe all Express requests to the main app server (localhost:3000).
8. Configures the Express app to listen on the webpack dev server port (localhost:4000).
9. Allows proxying of websockets when needed.
10. Dev server is now live on localhost:4000. This is where you point your browser.

src/index.js

This is the main application entry point.

1. Loads the environment from the .env.
2. Load the boot.js from the meteor folder. (prod/dev dependant)
3. [Dev Mode] Calls babel-register to bind require to automatically compile .jsx and .js with babel.
4. Calls Meteor.startup() (waits until Meteor is fully started up) and then loads src/server/index.js.

src/server/index.js

1. Create an Express app
2. If the url is for the favicon return a 404 error.
3. [Production Mod] If the url is under /static return the static file.
4. For all other requests return the SSR unless it's a sockjs request (for DDP).
5. Set Meteor's WebApp to use Express's rawConnectHandlers.
6. App is now live on localhost:3000.

src/client/index.js (from Webpack)

1. Use Meteor.startup() to wait for Meteor to start.
2. etc...

Webpack Dev Config

• Three entry points:
• /src/client/index.js
• react-hot-loader/patch
• webpack-hot-middleware/client
• Plugins:
• OccurrenceOrderPlugin
• HotModuleReplacementPlugin – Enables HMR API
• NoErrorsPlugin
• DefinePlugin – Global defines
• __CLIENT__ - True if on the client
• __PRODUCTION__ - True if in production
• Meteor.isClient - True if on the client
• Meteor.isCordova - True if using cordova
• Meteor.isServer - True if on the server
• process.env.TARGET -
• process.env.NODE_ENV – In development is 'development'
• HappyPack – Parallel transforming of modules.
• Used only for babel transforms.
• MeteorImportsPlugin – Import Meteor package like real NPM packages.
• Imports from the meteor build folder.
• Allows you to do import {Meteor} from 'meteor/meteor;
• Module Loaders:
• JSON Loader – Configured to load all .json from /src and node_modules.
• Raw Loader – Configured to load all .txt files.
• URL Loader – Configured to load png|jpg|jpeg|gif|svg|woff|woff2 files. Files under 10k are embedded.
• File Loader – Configured to load eot|ttf|wav|mp3 files.
• Style, CSS, PostCSS Loaders – Configured to load .css files under /src.
• Excludes files that are in /src/styles/global.
• PostCSS is configured with postcss-modules-values to pass values between CSS files.
• Style, CSS – Configured to include global .css files under /src/styles/global.
• HappyPack – Configured to load .js files with happypack.