He knows how I like my front-end: automated.
The contemporary front-end stack and build pipeline is a very opinionated place, with lots of choices for a lot of different setups. Bates is here to help automate a specific set of choices for React front-end projects.
Bates needs node >= 5 and npm >= 3.3
# check the versions
$ node -v && npm -v
# update if necessary
# use nvm to help you manage node versions https://github.com/creationix/nvm
$ nvm i 5
$ npm i npm -gCreate a new project
mkdir my-project
cd my-project
npm initInstall and run Bates
npm i bates --save-dev
npm run bates -- template
# create base files
npm run bates -- start
# start hot reload dev server at: http://localhost:3000
# run tests and lint on change
# hit ctrl+c to close the serverEdit the src/main.js.
When you want to deploy the site run:
npm run bates -- deploy
# follow the prompt, choose your domain
# the site will be available at http://yourDomain.surge.shBates work better together with the following code style and architecture: code style. The main part of it are the commit messages format, the folder structure and the inlined styles.
There're three main entry points on the code that Bates helps to handle:
- A site entry point (src/main.js),
- A npm package entry point (src/index.js), and
- A html script distribution entry point (src/dist.js)
For information on Travis continuous deploy/release see: travis setup
Development
npm run bates -- template
If missing, add some base files to your project.
npm run bates -- start
Prune and update your dependencies.
Start a hot-reloaded, babel transpiled, server at localhost:3000.
Run tests and lint on change.
Tell you about your outdated packages, your last release and what have changed until now.
npm run bates -- server
Run just the server from the start command.
npm run bates -- test
Test and lint your /src. Test files need to be named *.test.js
npm run bates -- testWatch
Same as above, but every time the source change
npm run bates -- cov
Run the test coverage and open a browser with the results.
Site deployment and package releases
npm run bates -- deploy
Generate a bundle file from /src/main.js on the /dist folder and deploy that folder to surge.sh.
If you add a CNAME file, you don't need to fill any prompts here.
npm run bates -- bundle
Generate a bundle file from /src/main.js on the /dist folder, for when you want to deploy your code as a website.
npm run bates -- bundleSize
Generate an analysis of the bundle size.
npm run bates -- lib
Transpile the code from /src to /lib, for when you want to release the code as a npm package.
npm run bates -- release
This command is aimed at automating releases on a CI server.
Using your git commit messages, check for the changes since your last release and suggest a new version. If approved, bump the package and push a new tag.
npm run bates -- dist
Generate a distribution file, for those who want to consume your npm package using html script tags directly.
npm run bates -- githubRelease
This command should be used on TravisCI, after a release.
Create release notes since your last release, using your git commit messages. Do a release on your github project.
Travis need to have a GIT_TOKEN environment variable set up with your project token.
npm run bates -- clean
Delete all build and transpiled files.