bates
v3.5.2
Published
Front-end butler for React projects
Downloads
32
Readme
Bates
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 a build config as a dependency, to help automate a specific set of choices for React front-end projects.
Quick start
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 node # update node
$ npm i npm -g # update npm
Create a new project
$ mkdir my-project # create project folder
$ cd my-project # get into folder
$ npm init # setup npm for the project
Install and run Bates
$ npm i bates -S # install and save bates
$ npm run bates -- template # create base files
$ npm start # start dev server.
# The dev server hot reloads the components, run tests and lint on change.
# Hit `ctrl+c` to close.
Base files:
- Site entry point is on
src/main.js
, theme and routes are defined there. - Entry component loaded by the template route is on
src/Home.js
. - Package entry point for when releasing projects as npm modules is on
src/index.js
. - Bates uses Stijl for the UI components of his template.
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.sh
For information on setting up Travis continuous deploy/releases see: travis setup
Folder Structure
my-project/
dist/ # site files go here
200.html
bundle.js # bundle is generated by webpack
node_modules/
lib/ # transpiled files from src, for releasing project as a npm pckg
index.js
src/
index.js # npm pckg entry point
main.js # site entry point
*.test.js # colocated tests
API
Bates adds its script to the package.json
file. So that from the project folder he can be executed as npm run bates -- <args>
.
Pay attention to the space after the double dash.
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.
Alias: npm start
.
npm run bates -- server
Run just the server from the start command.
The server defaults to port 3000, when the port is not available it uses the next one.
A PORT env var can also be passed. Eg: PORT=8080 npm run bates -- server
npm run bates -- test
Test and lint your /src. Test files need to be named *.test.js
.
Alias: npm test
.
npm run bates -- testWatch
Same as above, but for every time the source changes.
npm run bates -- cov
Run the test coverage and open a browser with the results.
Site deployment and package releases
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 -- 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 -- 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 -- 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.