shameemz / react-sphere

React Sphere is a boiler plate for building product for multiple platforms (mobile, desktop and VR) with single codebase.

react-sphere

A boiler plate for building product for multiple platforms (mobile, desktop and VR) with single codebase. It explains an architecture for building sites and apps for multiple platforms, for geographical regions(internationalization with a capability of changing themes) and flexible for building whitelabel sites/apps.

Advantages of react-sphere

• Follow adaptive design You can implement the adaptive design for each device types like mobile, desktop and VR
• Multiple sites / apps Able to build multiple sites and apps like B2B, whitelabel sites / apps and also tragetting geographical regions by country wise. (eg: French, Arabic) by inheriting or overriding the templates of global app / site (.com)

Idea

Idea inspired from Leland Richardson talk on Chain React 2017: React as a Platform

Getting Started

• Install react native If you haven't installed react native on your machine, follow these steps from React Native till Create new Application
• Install react-sphere as Gobal

  $ npm install -g react-sphere
  

• Create your project

  $ react-sphere init project_name
  

  Alternate way:

  react-native init project_name --template sphere
  cd project_name/
  node scripts/addDevDependencies.js
  

• After initializing the project, its all react-native and react. you can use react-native / react commands

Usage

• Configure the sites in .babelrc file, like below.

  {
    "presets": [
      "react-native"
    ],
    "plugins": [
      ["transform-inline-environment-variables"],
      ["variable-path-resolver", {
        "envName": "SITE",
        "vars": {
          "m-fr": {"Device": "Mobile", "Site": "Fr" },
          "m-com": {"Device": "Mobile", "Site": "Com"},
          "d-fr": {"Device": "Desktop", "Site": "Fr" },
          "d-com": {"Device": "Desktop", "Site": "Com"},
          "default": {"Device": null, "Site": "Com"}
        }
      }]
    ]
  }

• Running a web application (Webpack dev server)
  • SITE=m-com yarn web // For running your global mobile site
  • SITE=m-fr yarn web // french mobile site
  • SITE=d-com yarn web // global desktop site
  • SITE=d-fr yarn web // french desktop
  • To switch between sites, you may need to clear the compiler cache, for that you can use below command

    react-sphere switch m-fr web
    

• Running react-native app
  • react-native run-ios // For running your global mobile app
  • To change to french app, stop the existing bundling terminal and run below script and reload your app.

    SITE=m-fr yarn start --reset-cache
    

• Produciton build (web sites)
  • SITE=m-com yarn build
  • SITE=m-fr yarn build
  • yarn build:all // this will create builds for your sites mentioned in the .babelrc file
• Production build (mobile apps)
  • SITE=m-fr react-native run-ios --configuration Release
  • Basically prepend SITE={site-name} and follow the steps from react naitve running-on-device

Major Dependency

• babel-plugin-variable-path-resolver React sphere is implemented with this babel plugin

Similar Projects

• re-start
• react-xp

IDE

VScode users can start the project as

SITE=m-fr code project_name  

Create VScode Alias