Skip to content

A complete webpack configuration for react-native-web, optimized for both development and production

Notifications You must be signed in to change notification settings

ndbroadbent/react-native-web-webpack

Repository files navigation

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.

About

A complete webpack configuration for react-native-web, optimized for both development and production

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published