Weitere ähnliche Inhalte Ähnlich wie Building and deploying React applications (20) Kürzlich hochgeladen (20) Building and deploying React applications9. npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
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
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);
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.
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
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]
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"
}
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=?
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
49. storing manifests per user
S3, database, redis, memcache, etc
+ default manifest for the rest of the users
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
59. develop deploy test release
new frontend version
new backend version
local staging production
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