http://oh-my-home.netlify.com/
- Make sure you have
nvm
, nodev8.9.0 and up
installed - Install
yarn
-npm install -g yarn@0.27.5
. - Use a smart
.npmrc
. By default,npm
doesn’t save installed dependencies to package.json (and you should always track your dependencies!). npm install -g standard@10.0.3
# standardjsnpm install -g babel-eslint@8.0.3
npm install -g snazzy
$ npm config set save=true
$ npm config set save-exact=true
$ cat ~/.npmrc
When adding new packages, always use yarn add --exact <package>
. To add a package as a devDependency, use yarn add --exact -D <package>
. This will ensure the package is always added to the yarn.lock
file.
Make sure you have nvm
, node v8.9.0
, and yarn
installed before proceeding with the following steps. Also, ensure :
- Clone repo -
git clone git@github.com:joshuaalpuerto/oh-my-home.git
- Run
yarn
to install dependencies and clean the git repo. - Run
yarn start
to see the app athttp://localhost:3000
.
To build and test production build:
- Run
yarn run build
to build the app. - Run
yarn run start:prod
to run the app in production mode. Make sure there are no errors in the browser console log.
The [
app/](../../../tree/master/app)
directory contains your entire application code, including CSS, JavaScript, HTML and tests.
The rest of the folders and files only exist to make your life easier, and should not need to be touched.
Some files left out for brevity.
.
├── app/
| ├── components
| | └── Button
| | ├── index.js
| | └── tests
| | └── index.test.js
| ├── containers
| | ├── App
| | | ├── tests
| | | | ├── actions.js
| | | | ├── index.test.js
| | | | └── reducer.test.js
| | | ├── actions.js
| | | ├── constants.js
| | | ├── index.js
| | | ├── sagas.js
| | | └── reducer.js
| | |
| ├── tests
| ├── utils
| └── index.js
├── build/
├── docs/
├── internals/
├── server/
├── .editorconfig
├── .gitattributes
└── .gitignore
└── package.json
-
Run
npm run build
, which will compile all the necessary files to thebuild
folder. -
Upload the contents of the
build
folder to your web server's root folder.
This boilerplate uses styled-components allowing you to write your CSS in your JavaScript, removing the mapping between styles and components.
styled-components
let's us embrace component encapsulation while sanitize.css
gives us data-driven cross-browser normalization.
See the PostCSS Documentation for more information about PostCSS and CSS modules.
The app bundles all your clients-side scripts and chunk them into several files using code splitting where possible. Your code is automatically optimized when building for production so you don't have to worry about that.
App uses react-helmet for managing document head tags. Examples on how to write head tags can be found here.
- jest - Complete and easy to set-up JavaScript testing solution. Works out of the box for any React project.
- enzyme - JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
yarn test
- run all unit testyarn test:watch
- run all unit tests and watch it interactively.yarn test:coverage
- run all unit test with coverage.
Adding pre-commit
to your project can be helpful to encourage consistency and quality of your code repository.
- pre-commit - pre-commit is a pre-commit hook installer for
git
. It will ensure that yournpm test
(or other specified scripts) passes before you can commit your changes. This all conveniently configured in yourpackage.json
. - lint-staged - Linting makes more sense when running before committing your code. By doing that you can ensure no errors are going into repository and enforce code style. But running a lint process on a whole project is slow and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.
- 2 spaces – for indentation
- Single quotes for strings – except to avoid escaping
- No unused variables – this one catches tons of bugs!
- No semicolons – [It's][1] [fine.][2] [Really!][3]
- Never start a line with
(
,[
, or`
- This is the only gotcha with omitting semicolons – automatically checked for you!
- [More details][4]
- Space after keywords
if (condition) { ... }
- Space after function name
function name (arg) { ... }
- Always use
===
instead of==
– butobj == null
is allowed to checknull || undefined
. - Always handle the node.js
err
function parameter - Always prefix browser globals with
window
– exceptdocument
andnavigator
are okay- Prevents accidental use of poorly-named browser globals like
open
,length
,event
, andname
.
- Prevents accidental use of poorly-named browser globals like
- And more goodness
Use GitHub Flow when contributing code to the repository. It is a workflow where deployments are made regulary.
There's only one rule -- anything on master
branch is always deployable.