Download to read offline
!["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"
]
}
}
},](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-19-2048.jpg)
![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);](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-27-2048.jpg)
![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.](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-30-2048.jpg)
![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]](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-36-2048.jpg)
![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](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-42-2048.jpg)
![current_user req.current_user, request.user[. is_authenticated], …](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-47-2048.jpg)
![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](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-48-2048.jpg)
![assets_manifest_for(current_user)[bundle] • A/B testing • features testing in production env • UI experiments • gradually rolling out new features](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-50-2048.jpg)
![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](https://image.slidesharecdn.com/building-and-deploying-react-applications-180130215111/75/Building-and-deploying-React-applications-51-2048.jpg)
Uploaded byAstrails
Building and deploying React applications
The document outlines the process for building and deploying React applications, emphasizing the use of tools like create-react-app and webpack for managing development and production environments. It details various configurations and plugins used in Babel and webpack for optimizing performance and improving the development workflow, including hot reloading and async loading. Additionally, it discusses strategies for managing assets and user-specific manifests for enhanced deployment flexibility.
Building and deploying React applications
- 1. Building and DeployingReact Applications Boris Nadion boris@astrails.com @borisnadion
- 2.
- 3.
- 4.
- 5. awesome web andmobile apps
- 6.
- 7.
- 8. facebookincubator/create-react-app Create React appswith no build configuration.
- 9. npm install -gcreate-react-app create-react-app my-app cd my-app/ npm start
- 10. customize like adding csspreprocessors
- 11. yarn eject /npm eject
- 12. yarn eject /npm eject
- 13.
- 14.
- 15.
- 17.
- 18.
- 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.
- 25.
- 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 atthe 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 hotreload, 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.
- 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.js0.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 • webpackdev server (for dev mode) • same server, static assets • static assets through CDN • CDN direct • whatever
- 44.
- 45.
- 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.
- 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 peruser 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 debuggingan issue bundles v2.0 testing new release user with a bug in v1.12 marketing user all users
- 52. separate server andclient 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.
- 55.
- 56.
- 57. bundles v2.0bundles v2.1bundlesv2.2bundles v2.3bundles v2.4 server compatibility
- 58.
- 59. develop deploy testrelease new frontend version new backend version local staging production
- 60. release = updatedefault manifest for all the users
- 61. server first server isalways backward compatible easier to maintain compatibility on server with API versioning
- 62. zoo = notan engineering issue but administrative one
- 63.
- 64.
- 65.
- 66.
- 67.