Skip to content
This repository has been archived by the owner on Feb 19, 2022. It is now read-only.

Full archetype including builder-init sample app #1

Merged
merged 57 commits into from Mar 4, 2016
Merged
Show file tree
Hide file tree
Changes from 41 commits
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
8a89d4f
Configured with regular and dev archetype w/ starter lint scripts
zachhale Jan 12, 2016
0386eca
Merge branch 'master' of github.com:FormidableLabs/builder-react-app
zachhale Jan 12, 2016
a5b9a00
builder-support generated files
zachhale Jan 13, 2016
bd83f47
Moved all tasks over from converter-react
zachhale Jan 21, 2016
d53b94d
Update configs to be properly linted
zachhale Jan 21, 2016
843f1b0
Fixed hot webpack config
zachhale Jan 21, 2016
2b629e1
Updated README and DEVELOPMENT
zachhale Feb 3, 2016
6553412
Added sample react app for builder-init
zachhale Feb 22, 2016
582b075
Update docs
zachhale Feb 22, 2016
b5c58d6
Add .DS_Store to gitignore
zachhale Feb 23, 2016
7cf0c01
Remove .DS_Store and update .gitignore to keep them out
zachhale Feb 23, 2016
feb288b
Switch from exclude to include
zachhale Feb 23, 2016
41f1f65
Remove escapes from gitignores
zachhale Feb 23, 2016
4fedc58
Return promises in mocha tests instead of funky done callbacks
zachhale Feb 23, 2016
10ecf5f
Un-templatize server util
zachhale Feb 23, 2016
8f9ca79
Pass lint
zachhale Feb 23, 2016
9ff24c0
It's a whiz-bang-app|server, not component
zachhale Feb 23, 2016
928115c
Add node 4 to CI configs
zachhale Feb 23, 2016
2fd37e3
Update gitignores
zachhale Feb 23, 2016
7510490
Recommended builder install
zachhale Feb 23, 2016
f6e4aaa
Update CI node versions
zachhale Feb 23, 2016
a813442
Stage 2 babel
zachhale Feb 23, 2016
580ef2c
Use es6-react-test config defaults and update npm dependencies
zachhale Feb 23, 2016
20ee619
Disable no-magic-numbers
zachhale Feb 23, 2016
7559e9d
Add additional tweaks to webpack config
zachhale Feb 23, 2016
9dd2e6a
Remove eslint config overrides
zachhale Feb 24, 2016
2f7bd00
Update eslint-config-defaults and fix lint errors
zachhale Feb 24, 2016
4cfa9eb
Update dependencies to latest
zachhale Feb 24, 2016
73d7c60
Update lodash and karma-spec-reporter dependencies
zachhale Feb 24, 2016
4311a00
Init projects with 1.0.0
zachhale Feb 24, 2016
8f0930f
Rename start to npm:start and update README
zachhale Feb 24, 2016
587691f
Refactor webpack configs into partials
zachhale Feb 25, 2016
8373c74
Introduced peerDependencies
zachhale Feb 26, 2016
985a2cc
Rename test script to test-base
zachhale Feb 26, 2016
5da5560
Add a .travis.yml
zachhale Feb 27, 2016
72a19c1
Fix bug with test -> test-base
zachhale Feb 27, 2016
74cc2db
Updated boilerplate app dependencies
zachhale Feb 27, 2016
0b9c156
Add logger to init template
zachhale Feb 29, 2016
cb0fcd8
Add favicon handling to init
zachhale Feb 29, 2016
051806d
Refactor prod webpack config and remove dedupe plugin
zachhale Feb 29, 2016
8aabc98
Update gitignores with additional coverage
zachhale Feb 29, 2016
7bf3071
Update docs on including your node_modules/.bin in your PATH
zachhale Feb 29, 2016
8665246
Remvoe eslintrc-base
zachhale Mar 1, 2016
2c68cdf
Use SourceMapDevToolPlugin
zachhale Mar 1, 2016
ba886a1
Use .default instead of .partial
zachhale Mar 1, 2016
119ec36
Remove unnecessary then
zachhale Mar 1, 2016
ca2bc54
Pull out vars that dont need to be created on every render
zachhale Mar 1, 2016
d8d0a1f
Source map es6 mistake
zachhale Mar 1, 2016
5ef1853
Decompose server render method
zachhale Mar 1, 2016
65cda50
Remove unnecessary apple meta tag
zachhale Mar 1, 2016
136a1a0
Update dev package
zachhale Mar 1, 2016
cd66b6d
Remove const
zachhale Mar 1, 2016
351b6ed
Fix missing semicolon
zachhale Mar 1, 2016
066b271
Remove peerDependencies from normal dependencies
zachhale Mar 1, 2016
a3a631a
Lines at end of gitignores
zachhale Mar 1, 2016
2c3a77c
Remove $ from non-shell code
zachhale Mar 3, 2016
e220f25
Bump builder-support dependency to protect our peerDependencies
zachhale Mar 3, 2016
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
108 changes: 108 additions & 0 deletions .gitignore
@@ -0,0 +1,108 @@
### OSX ###
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk


### Windows ###
# Windows image file caches
Thumbs.db
ehthumbs.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msm
*.msp

# Windows shortcuts
*.lnk


### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*


### Node ###
# Logs
logs
*.log
npm-debug.log*
phantomjsdriver.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

# Build
dist/

# Deployment
Procfile


### IDEs ###
.project
49 changes: 49 additions & 0 deletions .travis.yml
@@ -0,0 +1,49 @@
language: node_js

node_js:
- "0.10"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ryan-roemer Why would any NEW project need to support 0.10. It's officially deprecated and will lose support completely in October.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I said before, ticket out all node legacy engine work to a future ticket and not here please. Thanks!

- "0.12"
- "4"

# Use container-based Travis infrastructure.
sudo: false

branches:
only:
- master

before_install:
# GUI for real browsers.
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start

before_script:
# Install dev. stuff (e.g., selenium drivers).
- builder run install-dev

script:
# Check archetype.
- npm --version
- npm run builder:check

# Create global link for the archetypes for our
- npm link
- cd dev && npm link && cd ..

# Initialize a fresh project from templates
- npm install -g builder-init
- mkdir .builder-init-tmp
- cd .builder-init-tmp
- >-
builder-init $PWD/.. --prompts='{
"packageName":"whiz-bang",
"packageGitHubOrg":"Acme",
"packageDescription":"Whiz Bang",
"destination":"whiz-bang"}'
# Run initialized project's own CI with npm link'ed archetypes.
- cd whiz-bang
- npm link builder-react-app builder-react-app-dev
- npm install
- node_modules/.bin/builder run check-ci
- npm prune --production
- node_modules/.bin/builder run build
235 changes: 235 additions & 0 deletions DEVELOPMENT.md
@@ -0,0 +1,235 @@
Development
===========

We use [builder][] and `npm` to control all aspects of development and
publishing.

As a preliminary matter, please update your shell to include
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this all about? I ain't gonna futz with my path for nobody? Not no way. Not no how.

`./node_modules/.bin` in `PATH` like:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @coopy -- ^^^ I originally wanted to delay this until later as the three snippets were harmonized until the most recent commit. But Zach wants to tackle this now...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't realize it was as big of an issue as it is. I'm fine reverting and addressing this later.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zachhale -- Harmonize with the other PRs, and I'm good however it lands for this blurb.


```sh
export PATH="${PATH}:./node_modules/.bin"
```

So you can type `builder` instead of `./node_modules/.bin/builder` for all commands.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see it's for builder... Can you just say something like:

In order to make using builder more convenient we recommend (and will assume for the rest of the documentation) that you have added builder to your path. Instructions can be found here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call, I'll make it less demanding. ;)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@baer @zachhale -- The above is already a "blessed" snippet that should be the exact one we use with Victory. Check, and if it is leave in place.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If @baer disagrees, file a ticket for later, we'll review the language for the blessed snippet, and update builder- and victory- archetypes all at once...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated it to a mix of the two that makes it clear that it's an optional task:

As a preliminary matter so you can type builder instead of
./node_modules/.bin/builder for all commands, please update your shell to include
./node_modules/.bin in PATH like:

$ export PATH="${PATH}:./node_modules/.bin"


See [builder usage][] for more information.


## Development

All development tasks consist of watching the app bundle and the test bundle.

Run the application with watched rebuilds:

```sh
$ builder run dev # dev test/app server (OR)
$ builder run hot # hot reload test/app server (OR)
$ builder run prod # run the "REAL THING" with watchers
```

From there you can see:

* App: [127.0.0.1:3000](http://127.0.0.1:3000/)
* Client tests: [127.0.0.1:3001/test/client/test.html](http://127.0.0.1:3001/test/client/test.html)

### Webpack Config

### moment

If you are including [moment][] in your project, it will by default include more
locales than just the `en` locale. All non-en locales will be filtered out by
default in the archetype's webpack config.


## General Checks

### In Development

During development, you are expected to be running either:

```sh
$ builder run dev
```

to build the lib and test files. With these running, you can run the faster

```sh
$ builder run check-dev
```

Command. It is comprised of:

```sh
$ builder run lint
$ builder run test-dev
```

Note that the tests here are not instrumented for code coverage and are thus
more development / debugging friendly.

### Continuous Integration

CI doesn't have source / test file watchers, so has to _build_ the test files
via the commands:

```sh
$ builder run check # PhantomJS only
$ builder run check-cov # (OR) PhantomJS w/ coverage
$ builder run check-ci # (OR) PhantomJS,Firefox + coverage - available on Travis.
```

Which is currently comprised of:

```sh
$ builder run lint # AND ...

$ builder run test-base # PhantomJS only
$ builder run test-cov # (OR) PhantomJS w/ coverage
$ builder run test-ci # (OR) PhantomJS,Firefox + coverage
```

Note that `(test|check)-(cov|ci)` run code coverage and thus the
test code may be harder to debug because it is instrumented.

### Client Tests

The client tests rely on webpack dev server to create and serve the bundle
of the app/test code at: http://127.0.0.1:3001/assets/main.js which is done
with the task `builder run server-test` (part of `npm dev`).

#### Code Coverage

Code coverage reports are outputted to:

```
coverage/
client/
BROWSER_STRING/
lcov-report/index.html # Viewable web report
func/
lcov-report/index.html # Viewable web report
server/
rest/
lcov-report/index.html # Viewable web report
unit/
lcov-report/index.html # Viewable web report

```


## Tests

The test suites in this project can be found in the following locations:

```
test/server
test/client
test/func
```

### Backend Tests

`test/server`

Server-side (aka "backend") tests have two real flavors -- *unit* and *REST*
tests. To run all the server-side tests, run:

```sh
$ builder run test-server
```

#### Server-side Unit Tests

`test/server/spec`

Pure JavaScript tests that import the server code and test it in isolation.

* Extremely fast to execute.
* Typically test pure code logic in isolation.

Run the tests with:

```sh
$ builder run test-server-unit
```

#### Server-side REST Tests

`test/server/rest`

REST tests rely on spinning up the backend web application and using an HTTP
client to make real network requests to the server and validate responses.

* Must set up / tear down the application web server.
* Issue real REST requests against server and verify responses.
* Fairly fast to execute (localhost network requests).
* Cover more of an "end-to-end" perspective on validation.

Your project will need to create a `base.spec.js` file to manage server setup/teardown.
See the archetype templates for an example:
[`base.spec.js`](./init/test/server/rest/base.spec.js)

Run the tests with:

```sh
$ builder run test-server-rest
```

### Frontend Tests

`test/client/spec`

Client-side (aka "frontend") unit tests focus on one or more client application
files in isolation. Some aspects of these tests:

* Extremely fast to execute.
* Execute via a test HTML driver page, not the web application HTML.
* Must create mock DOM and data fixtures.
* Mock out real browser network requests / time.
* Typically test some aspect of the UI from the user perspective.
* Run tests in the browser or from command line.
* May need to be bundled like your application code.

Before functional tests can be run, you will need to need to set up selenium
by running:

```sh
$ builder run install-dev
```

Build, then run the tests from the command line with:

```sh
$ builder run test-client
$ builder run test-client-cov # With coverage
$ builder run test-client-dev # (Faster) Use existing `builder run dev` watchers.
```

### Functional Tests

`test/func`

Functional (aka "integration", "end-to-end") tests rely on a full, working
instance of the entire web application. These tests typically:

* Are slower than the other test types.
* Take a "black box" approach to the application and interact only via the
actual web UI.
* Test user behaviors in an end-to-end manner.

Your project will need to create a `base.spec.js` file to manage server setup/teardown.
See the archetype templates for an example:
[`base.spec.js`](./init/test/func/spec/base.spec.js)

Run the tests with:

```sh
$ builder run test-func
$ builder run test-func-cov # With coverage
$ builder run test-func-dev # (Faster) Use existing `builder run dev` watchers.
```

[builder]: https://github.com/FormidableLabs/builder
[builder usage]: https://github.com/FormidableLabs/builder#usage
[moment]: http://momentjs.com/