Restructured react app

[davkal]

• web buildcontainer using package.json dependencies
• app.js bundle produced in web/build
• bundle and other assets add under /assets/
• webpack dev server for hot code reload: e.g. BACKEND_HOST=192.168.99.100:7070 npm start

Tasks

• [x] break up components into files
• [x] webpack bundling
• [x] fix container build

[squaremo]

$ make
# ....
rm -f build/bin/web
mkdir -p build/src/github.com/squaremo/flux && docker run --rm -e GOPATH=/build -v $PWD/build:/build -v $PWD:/build/src/github.com/squaremo/flux -v $PWD/docker/build-wrapper.sh:/build-wrapper.sh --workdir=/build/src/github.com/squaremo/flux/web squaremo/flux-build sh /build-wrapper.sh 'go install .'
rm -rf build-container
mkdir build-container
cp -pr docker/Dockerfile.webbuild web/package.json build-container/
docker build -t squaremo/flux-webbuild -f build-container/Dockerfile.webbuild build-container
Sending build context to Docker daemon  5.12 kB
Step 1 : FROM node
 ---> 285fd945c0b6
Step 2 : ENV NPM_CONFIG_LOGLEVEL warn
 ---> Using cache
 ---> 15b69678f788
Step 3 : COPY ./package.json ./
 ---> Using cache
 ---> 68c3704a58c9
Step 4 : RUN npm install --no-optional
 ---> Using cache
 ---> bb66099e2708
Successfully built bb66099e2708
rm -rf build-container
touch docker/.webbuild.done
mkdir -p build/src/github.com/squaremo/flux && docker run --rm  -v $PWD/build:/build -v $PWD:/build/src/github.com/squaremo/flux -v $PWD/docker/build-wrapper.sh:/build-wrapper.sh --workdir=/build/src/github.com/squaremo/flux/web squaremo/flux-webbuild sh /build-wrapper.sh 'npm run build'

> weave-flux@0.1.0 build /build/src/github.com/squaremo/flux/web
> webpack --config webpack.production.config.js

sh: 1: webpack: not found

npm ERR! Linux 4.4.0-040400rc7-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v5.3.0
npm ERR! npm  v3.3.12
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! weave-flux@0.1.0 build: `webpack --config webpack.production.config.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the weave-flux@0.1.0 build script 'webpack --config webpack.production.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the weave-flux package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config webpack.production.config.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls weave-flux
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /build/src/github.com/squaremo/flux/web/npm-debug.log
web/local.mk:10: recipe for target 'web/build/app.js' failed
make: *** [web/build/app.js] Error 1

It's unclear why webpack is on the path when run elsewhere.

[davkal]

@squaremo , from Slack

re: building, I think we’re getting there. I there a chance we can drop the tar W? that option does not exist on Darwin. Also, as you suggested, webpack.production.config.js is only needed at runtime, but so are the other dotfiles (except package.json). should we add those to the run step?

[squaremo]

I there a chance we can drop the tar W?

Yes, it just verifies the files added to the tar file.

Also, as you suggested, webpack.production.config.js is only needed at runtime, but so are the other dotfiles (except package.json). should we add those to the run step?

Yes, if that's the case, it'd be better to rebuild only the web image when those files change.

I'll make these changes.

[squaremo]

Yes, if that's the case, it'd be better to rebuild only the web image when those files change.

It appears that the JS tooling wants those dot-files to be in the same directory as package.json (or node_modules -- it's hard to find any relevant documentation). But we can't put them there without contortions, since we generally want to mount our source and config files in a _sub_directory of that containing the node_modules. (Although we can bind-mount individual files, which is what is done to put webpack.production.config.js in the right place).

I've fixed the faulty tar flag, but left this bit alone -- configs aren't likely to change all that often, and rebuilding the webbuild image is not the end of the world.