1. Building and Deploying React
Applications
Boris Nadion
boris@astrails.com
@borisnadion

2. @borisnadion
boris@astrails.com

3. astrails
http://astrails.com

4. 2005

5. awesome web and mobile apps

6. building & deploying

7. building & deploying

8. facebookincubator/create-react-app
Create React apps with no build configuration.

9. npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

10. customize
like adding css preprocessors

11. yarn eject / npm eject

12. yarn eject / npm eject

13. not trivial

14. start from scratch

15. setup internals

17. environments
✓ development
✓ production
x test

18. package.json

19. "babel": {
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-0"
],
"plugins": [
"transform-runtime",
"babel-plugin-transform-class-properties",
"transform-object-rest-spread"
],
"env": {
"production": {
"plugins": [
"transform-react-inline-elements",
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
}
}
},

20. babel-plugin-transform-class-properties
class Bork {
//Property initializer syntax
instanceProperty = "bork";
boundFunction = () => {
return this.instanceProperty;
}
//Static class properties
static staticProperty = "babelIsCool";
static staticFunction = function() {
return Bork.staticProperty;
}
}
let n = { x, y, ...z };
transform-object-rest-spread

21. transform-react-inline-elements
babelHelpers.jsx(Baz, { foo: "bar" }, "1");
const Hr = () => { return <hr className="hr" />; };
const _ref = <hr className="hr" />;
const Hr = () => {
return _ref;
};
transform-react-inline-elements
Baz.propTypes = {…}
transform-react-remove-prop-types

22. “start":
"env NODE_ENV=development webpack-dev-server --progress --colors",
“build":
"rimraf dist &&
env NODE_ENV=production webpack --colors &&
cp ./dist/* ../public/assets/",

24. webpack config

25. webpack config
http://imgur.com/gallery/EnAmi

27. const ENV = process.env.NODE_ENV;
const VALID_ENVIRONMENTS = ['development', 'production'];
if (!VALID_ENVIRONMENTS.includes(ENV)) {
throw new Error(`${ ENV } is not valid environment!`);
}
const DEVELOPMENT_CONFIG = require('./config/webpack.dev');
const PRODUCTION_CONFIG = require('./config/webpack.prod');
const config = {
development: DEVELOPMENT_CONFIG,
production: PRODUCTION_CONFIG
}[ENV];
const COMMON_CONFIG = { … };
module.exports = webpackMerge.smart(COMMON_CONFIG, config);

28. let’s look at the code
webpack.config.js + dev + prod

29. 3 bundles
bundle.js
+ css
client.js
+ css
async.js
+ css

30. yarn start v0.24.4
$ env NODE_ENV=development webpack-dev-server --progress --colors
10% building modules 2/2 modules 0 active
Project is running at http://0.0.0.0:9001/
webpack output is served from http://localhost:9001/assets/
404s will fallback to /index.html
Hash: 9a91c0c826ebb4c40f2a
Version: webpack 2.6.1
Time: 6507ms
Asset Size Chunks Chunk Names
0.js 806 bytes 0 [emitted]
client.js 313 kB 1 [emitted] [big] client
vendor.js 1.45 MB 2 [emitted] [big] vendor
0.js.map 572 bytes 0 [emitted]
client.js.map 360 kB 1 [emitted] client
index.html 421 bytes [emitted]
webpack: Compiled successfully.

31. dev mode demo
hot reload, async load, eslint errors

32. //…
import { AppContainer } from 'react-hot-loader';
//…
const hotRender = () => {
render(
<AppContainer>
<Application store={ store } />
</AppContainer>,
document.getElementById('root')
);
};
hotRender();
module.hot.accept('components/Application', hotRender);
hot reload

33. import asyncComponent from 'components/AsyncComponent';
const AsyncDashboard = asyncComponent(() =>
import('./Dashboard').then(module => module.default)
);
export default AsyncDashboard;
async load

34. import React from 'react';
const asyncComponent = (getComponent) =>
class AsyncComponent extends React.Component {
state = { Component: null };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
this.setState({ Component });
});
}
}
render() {
const { Component } = this.state;
if (Component) {
return <Component { ...this.props } />;
}
return null;
}
};
export default asyncComponent;
async load

35. prod build
yarn build

36. yarn build v0.24.4
$ rimraf dist && env NODE_ENV=production webpack --colors && cp ./dist/* ../public/assets/
Hash: f5404348a5a4eadca2c5
Version: webpack 2.6.1
Time: 9894ms
Asset Size Chunks Chunk
Names
client-149e7f81934ccd4797d6.bundle.js.map 183 kB 1 [emitted] client
0-b065752a37e19efffbe1.bundle.js 318 bytes 0 [emitted]
webpack-chunk-manifest.json 79 bytes [emitted]
vendor-411f8db22ac4a264ff0d.bundle.js 265 kB 2 [emitted] [big] vendor
client-e9da9d78d42878a4c3a5a7ab1330ea79.css 2.7 kB 1 [emitted] client
0-b065752a37e19efffbe1.bundle.js.map 2.11 kB 0 [emitted]
client-149e7f81934ccd4797d6.bundle.js 24 kB 1 [emitted] client
client-e9da9d78d42878a4c3a5a7ab1330ea79.css.map 120 bytes 1 [emitted] client
client-149e7f81934ccd4797d6.bundle.js.gz 8.35 kB [emitted]
vendor-411f8db22ac4a264ff0d.bundle.js.gz 77.9 kB [emitted]
index.html 493 bytes [emitted]
webpack-asset-manifest.json 468 bytes [emitted]

37. new webpack.HashedModuleIdsPlugin(),
new ManifestPlugin({
fileName: 'webpack-asset-manifest.json'
}),
new ChunkManifestPlugin({
filename: 'webpack-chunk-manifest.json',
manifestVariable: 'webpackManifest'
}),

38. // webpack-chunk-manifest.json
{"0":"0-b065752a37e19efffbe1.bundle.js"}
// webpack-asset-manifest.json
{
"0-b065752a37e19efffbe1.bundle.js": "0-b065752a37e19efffbe1.bundle.js",
"0-b065752a37e19efffbe1.bundle.js.map": "0-b065752a37e19efffbe1.bundle.js.map",
"client.css": "client-e9da9d78d42878a4c3a5a7ab1330ea79.css",
"client.css.map": "client-e9da9d78d42878a4c3a5a7ab1330ea79.css.map",
"client.js": "client-149e7f81934ccd4797d6.bundle.js",
"client.js.map": "client-149e7f81934ccd4797d6.bundle.js.map",
"vendor.js": "vendor-411f8db22ac4a264ff0d.bundle.js"
}

39. 4 bundles
vendor.js client.js 0.js client.css

40. html from server
/* … */
<script type=“text/javascript”>
window.apiEndPoint = "http://stage.example.com"
</script>
<link href="//xxx/client.css" rel="stylesheet" />
<script src="//xxx/vendor.js”></script>
<script src="//xxx/client.js"></script>
/* … */
} xxx=?

41. <div id="root"></div>
<%= api_endpoint_from_environment %>
<%= client_application_stylesheet_tag 'client.css' %>
<%= client_application_javascript_tag 'vendor.js' %>
<%= client_application_javascript_tag 'client.js' %>
server template

42. module ClientApplicationHelper
# client_application_javascript_tag 'client.js'
def client_application_javascript_tag(bundle)
src =
if client_application[:use_manifest]
# "client.js": "client-149e7f81934ccd4797d6.bundle.js",
manifest = client_application[:asset_manifest][bundle]
# static asset
"/assets/#{bundle}"
else
# dev mode
"http://localhost:9001/assets/#{bundle}"
end
javascript_include_tag(src)
end
def client_application_stylesheet_tag(bundle)
# …
# almost the same but no need to render in dev mode
end
end

43. serve from
• webpack dev server (for dev mode)
• same server, static assets
• static assets through CDN
• CDN direct
• whatever

44. awesome

45. almost awesome

46. <%= client_application_stylesheet_tag 'client.css' %>
<%= client_application_javascript_tag 'vendor.js' %>
<%= client_application_javascript_tag 'client.js' %>
in a context of a request

47. current_user
req.current_user, request.user[. is_authenticated], …

48. module ClientApplicationHelper
def client_application_javascript_tag(bundle)
src =
if client_application[:use_manifest]
# "client.js": "client-149e7f81934ccd4797d6.bundle.js",
manifest = assets_manifest_for(current_user)[bundle]
# …
end
javascript_include_tag(src)
end
end

49. storing manifests per user
S3, database, redis, memcache, etc
+ default manifest for the rest of the users

50. assets_manifest_for(current_user)[bundle]
• A/B testing
• features testing in production env
• UI experiments
• gradually rolling out new features

51. assets_manifest_for(current_user)[bundle]
bundles v1.12
default
bundles v1.13
debugging an issue
bundles v2.0
testing new release
user with a bug in v1.12
marketing user
all users

52. separate server and client
deployments

53. client lifecycle
• build: get new bundles + manifest
• deploy: upload bundles to remote
storage (S3) + warm up CDN
• release: update user’s or default
manifest

54. awesome

55. almost awesome

56. http://www.enjoyart.com/single_posters/animals_art_photo/NoahsArkTakinoAnimalsArtPrintPoster.htm
zoo

57. bundles v2.0bundles v2.1bundles v2.2bundles v2.3bundles v2.4
server
compatibility

58. API
compatibility

59. develop deploy test release
new frontend version
new backend version
local staging production

60. release = update default manifest
for all the users

61. server first
server is always backward compatible
easier to maintain compatibility on server with API versioning

62. zoo = not an engineering issue
but administrative one

63. awesome

64. really awesome

65. https://github.com/astrails/rails_react_webpack
thanks to mike@astrails.com aka @mihap

66. http://astrails.com/blog
slides will be available

67. thanks!
Boris Nadion
http://astrails.com
boris@astrails.com
@borisnadion