Skip to content

mgrip/startd

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

startd πŸš€

πŸ‘‹

startd is a toolbox πŸ› πŸ“¦ to help you get your new react web app up and running fast

Going from react component to fully functioning web app should be as easy as installing a local dependency

Getting started

note: startd uses webpack+babel to compile your app. By default it will use the react babel preset, but if you want to add other transpile options you can create a .babelrc file in your app directory

npm install --save startd-server react react-dom react-helmet
npx startd app.js

Screenshot

Production Usage

NODE_ENV=production npx startd app.js
node server.bundle.js

In production mode, startd will run once and bundle all of your assets into separate server and client bundles. Then to launch your production server, you can just run the server.bundle.js file.

How it works

The core pieces of startd are <100 lines of code. If you want to really know how your application works, go take a look!

πŸ”Ž server | client

Under the hood, startd uses koa to launch a new server, and just renders your react component specified by the --path parameter as the root level component. It uses the concept of universal javascript to ensure your app rendered on the initial server response is the same as the code sent to the client. It uses webpack+babel to compile your application.

When running in development mode, startd additionally launches another server to dynamically serve any changed assets, that update as soon as you save a change to any file referenced from your app. This is driven by webpack-dev-middleware which serves the assets, and webpack-hot-client which sends updates to your browser as files change.

Contributions welcome!

πŸ‘¨β€πŸŽ€πŸ‘©β€πŸ”¬πŸ‘¨β€πŸŽ¨