A complete webpack configuration for react-native-web, optimized for both development and production
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6526d14 Apr 25, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Initial commit Apr 25, 2017
android Initial commit Apr 25, 2017
ios Initial commit Apr 25, 2017
web Initial commit Apr 25, 2017
.babelrc Initial commit Apr 25, 2017
.buckconfig Initial commit Apr 25, 2017
.flowconfig Initial commit Apr 25, 2017
.gitattributes Initial commit Apr 25, 2017
.gitignore Initial commit Apr 25, 2017
.watchmanconfig Initial commit Apr 25, 2017
README.md Initial commit Apr 25, 2017
app.js Initial commit Apr 25, 2017
app.json Initial commit Apr 25, 2017
index.android.js Initial commit Apr 25, 2017
index.ios.js Initial commit Apr 25, 2017
index.web.js Initial commit Apr 25, 2017
package.json Initial commit Apr 25, 2017
yarn.lock Initial commit Apr 25, 2017

README.md

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
  • 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 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.
(The web task will automatically run this if it does not exist.)
npm run web:build Builds your app for production.
(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. You can add variables to the HTMLWebpackPlugin config in web/webpack.config.js, and use these variables in the template.

Examples:

In web/webpack.config.js:

  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'web/templates/index.ejs',
    myVariable: 'foo',
  }),

In web/templates/index.ejs:

<div><%= htmlWebpackPlugin.options.myVariable %></div>

or:

<% if (htmlWebpackPlugin.options.myVariable) { %>
  <div><%= htmlWebpackPlugin.options.myVariable %></div>
<% } %>

See the HtmlWebpackPlugin README 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). 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:

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.