1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
# React Native for Web - Example App
This is a boilerplate React Native app with `react-native-web` installed and configured.
## Features
* index.html as an EJS template
* Code-splitting
* Saves time during development, saves bandwidth during updates
* Offline Plugin
* Caches all of your assets so your app works without an internet connection
Coming soon:
* Pre-rendering as static HTML
* [react-hot-loader](https://github.com/gaearon/react-hot-loader)
* Script to deploy your build to AWS S3, and optionally clear your CloudFlare cache
> Note: This boilerplate project only contains an example webpack configuration for React Native Web.
> You should merge this into your favorite React Native starter project.
## iOS and Android
Use the default React Native Packager for iOS and Android:
Script | Description
---|---
`react-native start` | Starts React Native Packager
`react-native run-ios` | Runs the iOS app
`react-native run-android` | Runs the Android app
## Web
`react-native-web` does not use the React Native Packager, so you need to use [webpack](https://webpack.github.io/) to compile your app. This example app contains a complete webpack configuration that is optimized for development and production.
Script | Description
---|---
`npm run web` | Starts the development server on port `3000`.
`npm run web:build:vendor-dev` | Builds the `react-native-web` library for development.<br/>(The `web` task will automatically run this if it does not exist.)
`npm run web:build` | Builds your app for production. <br/>(Runs `web:build:vendor` and `web:build:app`.)
`npm run web:build:vendor` | Builds the `react-native-web` library for production.
`npm run web:build:app` | Builds your app, and any implicit vendored libraries.
`npm run web:serve` | Serves the production build on port `3001`.
`npm run web:clean` | Deletes all generated files.
> Note: If you haven't changed any libraries in `vendor.webpack.config.js`, you can run `npm run web:build:app` to just compile your app's source code. `npm run web:build` will recompile everything.
## index.html
Your index file is generated from a template at [web/templates/index.ejs](/web/templates/index.ejs).
You can add variables to the [HTMLWebpackPlugin config](web/webpack.config.js#L49-L52) in `web/webpack.config.js`, and use these variables in the template.
### Examples:
In `web/webpack.config.js`:
```js
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'web/templates/index.ejs',
myVariable: 'foo',
}),
```
In `web/templates/index.ejs`:
```html
<div><%= htmlWebpackPlugin.options.myVariable %></div>
```
or:
```html
<% if (htmlWebpackPlugin.options.myVariable) { %>
<div><%= htmlWebpackPlugin.options.myVariable %></div>
<% } %>
```
> See the [HtmlWebpackPlugin README](https://github.com/jantimon/html-webpack-plugin#html-webpack-plugin) for more information.
## Code Splitting
You can add any `react-*` and `react-native-*` libraries to the `entry` section in `vendor.webpack.config.js`. Webpack will compile these libraries separately, and link them with your app's code. (See the [DllPlugin](https://github.com/webpack/docs/wiki/list-of-plugins#dllplugin)). This saves a lot of time during development, because you don't have to keep recompiling your static libraries. This also saves bandwidth when you release an update, because your users will only need to download the updated app bundle.
You can add multiple entry sections to `vendor.webpack.config.js`. I recommend creating another entry for "core" libraries that don't change very often, but are unrelated to `react` or `react-native-web`. In addition to the explicit vendoring in `vendor.webpack.config.js`, webpack will also create an implicitly vendored bundle, for any libraries in `node_modules/`.
Here is an example of what your build directory will look like:
```
javascript/
vendor/
lib-6b8747b211107409.js
react-853080ae05a52a66.dll.js
app-6b8747b211107409.js
```
* `lib.*.js` is an implicitly vendored bundle, for all libraries in `node_modules`
* `react.*.dll.js` contains `react-native-web` and all of it's dependencies
* `app.*.js` is your app's source code.
## Offline Plugin
If you want your app to be available offline, you can change this line at the top of `web/webpack.config.js`:
```js
const enableOfflinePlugin = false
```
This will automatically configure a ServiceWorker (or AppCache) to download and cache all of your assets, so people will be able to use your app even if they don't have an internet connection.
> The Offline Plugin will only be enabled in the production build.
|
