A dependency--not a boilerplate--to make your React project a delight to develop.
This is brand new, not ready for production unless you are ready and willing to contribute to the project. Basically just building something we want here, if it interests you, please help :)
Also, it has no tests. Also, it's awesome.
Please see CONTRIBUTING.md
Don't clone this repo, it's not a boilerplate. Do this:
# don't like global npm installs, so you get to make the project
mkdir best-app-of-your-life
cd best-app-of-your-life
npm init .
# follow prompts
# react project is a dependency, not a boilerplate, install it
npm install react-project --save
# You probably want a bit of boilerplate to get started though.
# There isn't much here, it just connects the pieces that
# react-project gives you
node_modules/.bin/react-project init
# follow prompts
# and from now on you only deal with npm scripts
npm install
npm start
Now open http://localhost:8080.
Go edit a file, notice the app reloads, you can enable hot module
replacement by adding AUTO_RELOAD=hot
to .env
.
Also:
npm test
Also:
NODE_ENV=production npm start
Minified, gzipped, long-term hashed assets and server-pre-rendering, and more.
- React
- Modern JavaScript with Babel
- ES2015
- React preset (JSX)
- Stage 1 proposals preset (gotta have that
{ ...awesome, stuff }
) - configurable with
.babelrc
- Polyfills
- Express server rendering
- Server-only routes (what?)
- Document titles
- Code Splitting
- vendor/app initial bundles
- lazy route config loading
- lazy route component loading
- Auto Reload
- Refresh (entire page)
- Hot Module Replacement (just the changed components)
- None (let you refresh when you're ready)
- Webpack loaders
- babel
- CSS Modules
- json
- url Fonts / images
- Optimized production build
- gzip
- Minification
- long-term asset caching
- base64 inlined images/fonts/svg < 10k
- Test Runner
Please see CONTRIBUTING.md and help out :)
- Cut the crap and start building an app right away
- Wrap up the stuff that is good for all apps.
- Keep the app in charge. Config lives in the app, defaults provided by the framework are imported into the app, the app is not imported into the framework.
- Escape hatches are important.
- Upgrading should be simple, benefits should come w/o changing app code usually.
As soon as I ship a real app with this, I'll ship 1.0.
After running react-project init
your package.json will have some new tasks.
Starts the server. It's smart enough to know which NODE_ENV
you're in.
If NODE_ENV=production
you'll get the full production build. If you're
shipping to heroku, for instance, deploying is just git push heroku master
.
It'll create a production build up there.
Runs any files named modules/**/*.test.js
with karma and mocha.
Implementation needs work
- App doesn't need
tests.webpack.js
context junk. - App only has a karma config and a webpack tests config
- Karma config:
- configurable on package.json
react-project
, like"karma": "karma.conf.js"
- blueprint default is
export { KarmaConfig } from 'react-project/test'
- configurable on package.json
- Webpack test config
- one more export from
webpack.config.js
- one more export from
- Both configs should be babel'd.
This way people can mess w/ the default configs (both webpack and karma) or take full control.
NODE_ENV=development
# web server port
PORT=8080
# webpack dev server port
DEV_PORT=8081
# where to find assets, point to a CDN on production box
PUBLIC_PATH=/
# "hot", "refresh", and "none"
AUTO_RELOAD=refresh
import { lazy, ServerRoute } from 'react-project'
Convenience method to simplify lazy route configuration with bundle loader.
import { lazy } from 'react-project'
// bundle loader returns a function here that will load `Dashboard`
// lazily, it won't be in the intial bundle
import loadDashboard from 'bundle?lazy!./Dashboard'
// now wrap that load function with `lazy` and you're done, you've got
// super simple code splitting, the dashboad code won't be downloaded
// until the user visits this route
<Route getComponent={lazy(loadDashboard)}/>
// just FYI, `lazy` doesn't do anything other than wrap up the callback
// signatures of getComponent and the bundle loader. Without `lazy` you
// would be doing this:
<Route getComponent={(location, cb) => {
loadDashboard((Dashboard) => cb(Dashboard.default))
}}/>
Defines a route to only be available on the server. Add handlers (functions) to the different http methods.
Note: You have to restart the server after making changes to server routes. But only until somebody implements HMR for the server.
You can nest routes to get path nesting, but only the final matched route's handler is called (maybe we could do somethign cool later with the handlers?!)
import { ServerRoute } from 'react-project/server'
import {
listEvents,
createEvent,
getEvent,
updateEvent,
deleteEvent
} from './events'
export default (
<Route path="/api">
<ServerRoute path="events"
get={listEvents}
post={createEvent}
>
<ServerRoute path=":id"
get={getEvent}
patch={updateEvent}
delete={deleteEvent}
/>
</ServerRoute>
</Route>
)
import { createServer } from 'react-project/server'
createServer({ renderDocument, renderApp, routes }).start()
Creates and returns a new Express server, with a new
start
method.
App-supplied function to render the top-level document. Callback with
a Document
component. You'll probably want to just tweak
the Document
component supplied by the blueprint.
callback(err, reactElement, initialState)
reactElement
is the react element to be renderedinitialState
is initial state from the server for data re-hydration on the client.
App-supplied function to render the application content. Should call
back with <RouterContext {...props}/>
or something that renders a
RouterContext
at the end of the render tree.
callback(err, reactElement)
If you call back with an error object with a status
key, the server
will respond with that status:
callback({ status: 404 })
The app's routes.
It's not intended that you use this directly, task should be done with npm scripts.
Initializes the app, copies over a bluebrint app, updates package.json with tasks, etc.
Builds the assets, called from npm start
, not normally called
directly.
Starts the server. Called from npm start
, not normally called
directly.