October 23, 2018

623 words 3 mins read

react-everywhere/re-start

react-everywhere/re-start

react-native template to target multiple platforms :globe_with_meridians: :iphone: :computer: with single codebase.

repo name react-everywhere/re-start
repo link https://github.com/react-everywhere/re-start
homepage https://medium.com/@amoghbanta/write-once-use-everywhere-with-react-native-d6e575efe58e#.nfl50gwfg
language JavaScript
size (curr.) 460 kB
stars (curr.) 1222
created 2017-01-01
license MIT License

re-start :globe_with_meridians: :iphone: :computer:

PRs Welcome

re-start

Aim of the project

  • Target multiple platforms (Android, iOS, Web, Windows[UWP] and Electron[macOS, Linux, Windows]) with react native' APIs and a single codebase.
  • Follow best practices while doing the above.
  • Cut out the time and effort it takes to setup the project (based on create-react-app).
  • Achieve write once run everywhere with react-native (though react strictly says ‘Learn once use anywhere’).
  • Mitigate git cloning or manual upgrading of boiler plates, which is possible because this project is a react-native template. :tada:

Structure of the project

  • This project comprises of several templates that are curated keeping in mind the various use cases of initiating a new project. Based on your requirements and preferences, you can choose a templates that suits your you case the best.
Template Name Description Version
re-base The most basic version that runs on all platforms npm version
re-dux re-base with redux wired out of the box npm version
re-route re-base with react-router wired out of the box npm version
re-start re-base combined with redux and react-router npm version

Usage

Pre-requisites

  • Node.js & npm
  • react-native CLI (npm install -g react-native-cli)

Install

  1. Create a new react-native project using react-native-cli and specify re-base as a template:
    react-native init <Your Project Name> --template re-base
    
  2. React Native don’t support templates inheritance. If you want to use a derived template like re-dux or re-route, install them directly on top of the just created project. You’ll probably get a warning about the project already exists, just say it yes to overwrite the needed files.
    react-native init <Your Project Name> --template re-dux
    react-native init <Your Project Name> --template re-route
    react-native init <Your Project Name> --template re-start
    
    re-start template depend of both re-route and re-dux, be sure to install them first in that order.
  3. Since react-native-template doesn’t support adding custom scripts to package.json, exec ./finishInstall.js to finish the project configuration.
  4. Your project should now be ready to build apps for the different platforms.

Run the project on a specific platform

Android/iOS

npm/yarn run android
npm/yarn run ios

In case of problems, this tutorial will help you to configure your environment.

Desktop (Electron)

npm/yarn run electron

Web

npm/yarn run web

Windows

npm/yarn run windows

Windows platforms needs to have installed the Windows 10 SDK Build 14393 to be able to be build. A certificate is needed to sign the binary, follow the instructions to create or update the sign certificate. After that, a pop-up window would appear during the first time you exec the build process asking to install the certificate you’ve just created, just accept it.

Build for production

Android

npm/yarn run android:release

Electron

npm/yarn run electron:release

If you are running this on Linux or OSX, this will need you have wine 1.6 installed in your system because setting the Windows app icon makes usage internally of the node-rcedit package.

iOS

npm/yarn run ios:release

Web

npm/yarn run web:release

This will build your production ready bundle

Windows

npm/yarn run windows:release

Some very useful cross platform compatible libraries

Progress

  • support for web (react-native-web_improved)
  • support for Windows (react-native-windows)
  • Support for electron
  • Compatibility with React 16
  • Add Docs and FAQs
  • Configure Travis and Greenkeeper
  • Interactive CLI to create templates and components

Running demo on Web, Android, iOS, Windows(Universal) and Electron

Contributors

Thanks goes to these wonderful people (emoji key):

Amogh Banta💻 🎨 📖 🐛 🤔 ⚠️ Jesús Leganés-Combarro💻 🤔 🐛 ⚠️ 👀 📖 Ankit Popli👀 🤔 🐛 Christopher Hein📖 🐛 DuncanMacWeb💻

Full list of contributors can be found here.

Companies that contribute to re-start’s development

LICENSE

MIT

comments powered by Disqus