Be sure to be running [email protected] or later. At least Node.js 8 LTS is strongly recommended.
git clone https://github.com/gxa/atlas-package my-package
cd my-package
rm -rf .git
git init
git remote add origin https://github.com/gxa/my-package.git
Remember to create the new repository. The recommendation is to prefix the package name with “atlas-”.
Fill in the fields name
, description
and repository
. As a general rule the packages are prefixed with
“expression-atlas-” or “sc-atlas-”. Finally, replace or remove README.md
.
Runs the build
script before npm publish
. Only the lib
directory is packaged, so make sure everything (including
assests such as CSS or images are there).
After bumping the version with e.g. npm version minor
, the package is automatically published and pushed, with all
tags, so new versions can be published in a single step.
npm test
runs all phases of the test lifecycle (i.e. pretest
, test
and posttest
); in case you’ve added support
for Coveralls you won’t likely want to run the posttest
phase. If that’s the case just do npx jest
.
Basic test boilerplate is included with Jest and
Enzyme. Jest is a test runner, an assertion library and a snapshot tester, whereas Enzyme
allows DOM testing. See the examples included in __test__
to get an idea.
If you want CI and nice passing/failing badges, enable the repository in Travis CI. Now, with each push, Travis CI will run your tests and generate a report. You can display a test status badge going to
Travis CI, clicking on the badge and pasting the Markdown embed snippet on your README.md
.
Enabling code coverage is very similar. You need to enable your repository in Coveralls. Every time that Travis is run, it will generate coverage information and send it to Coveralls for a coverage report. If you go to Coveralls, you can also get a snippet to embed the coverage report shield on your readme file.
- React 16 and PropTypes
- URI.js for URL manipulation (the rich version of
query-string
) - Babel with presets
env
andreact
(see.babelrc
) - Webpack 4 with Webpack-CLI and Webpack-Dev-Server
- Jest and Enzyme for testing
No polyfills are included by default, but you might want one or both of these:
npm install --save-dev whatwg-fetch @babel/polyfill
Tweak your webpack.config.js
to include them in your entry points:
entry: {
myComponent: [`@babel/polyfill`, `whatwg-fetch`, `./html/render.js`]
...
}
Use Webpack-Dev-Server:
npx webpack-dev-server -d