xplat-boiler
Cross Platform Boiler
Last updated a year ago by benmort .
Original npm · Tarball · package.json
$ cnpm install xplat-boiler 
SYNC missed versions from official npm registry.

Boiler

This is a boilerplate Cross Platfrom React Native App

Quick Deploy

Deploy

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

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.

Cross Platform

Script Description
npm start Starts All Platfroms & API in Dev Mode

iOS and Android

Use the default React Native Packager for iOS and Android:

Script Description
npm run native:dev Starts React Native Packager and Launches Expo
npm run ios:dev Runs the iOS emulator
npm run android:dev Runs the Android emulator
npm run native:prebuild Ensures your app will be republished to the latest version
npm run andriod:build Build the Android dist
npm run ios:build Runs the IOS dist

Web

react-native-web uses webpack to compile your app.

Script Description
npm start Serves native app and web app on port3000.
npm run web Serves the production build on port 3001.
npm run web:dev 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:clean Deletes all generated files.
npm run deploy:production Deploys Web & API to Production Instance.
npm run deploy:stage Deploys Web & API to Stage Instance.

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.

API

Script Description
npm run api Starts API Node instance

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.

Current Tags

  • 0.0.1                                ...           latest (a year ago)

1 Versions

  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (65)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |