It’s trivial today to start writing and debugging some React code, but it’s not 100% clear how to properly deploy the application, manage versions and what implications that has on the build configurations. Especially if you want to allow different versions for different users in order to perform some A/B testing, testing new features in production environment, come up with some UI experiments, or gradually roll out new features for a subset of users. In this presentation I hopefully covered all that.

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