React Native for Web and a stack to enable in-browser cross platform development / deployment

[msand]

Great work on Structor!

Have you/anyone tried using it with https://github.com/necolas/react-native-web ? Combining structor and rnweb with some of the boilerplate from e.g. https://github.com/este/este would enable cross-platform development of React and React Native based apps.

Adding version control using e.g. git would allow continuous integration and deployment https://circleci.com, publishing to the app stores and elastically scaled clouds / serverless providers (now, firebase, aws etc.). CodePush http://microsoft.github.io/code-push/ updating the native apps js and static resources without requiring an update from the app store. Graphcool https://www.graph.cool/ could be used to get a statically typed, graphql queryable backend as a service.

Seems like a great way / stack to introduce people to software development. Would cover most needs of simple projects/prototyping at least, all from the browser (and possibly some commands in the terminal). I'm quite interested in helping out in this effort. What are your plans / roadmap with this project?

[msand]

It seems React Native for Web works out of the box. npm install react-native-web Then copy paste their example in to a component: https://www.webpackbin.com/bins/-KgucwxRbn7HRU-V-3Bc I guess everything already works, just need to make a starter/boilerplate project for it, and a single source of truth for configuration/authentication to all the relevant/needed services.

[msand]

Actually, styles don't work as is...

[msand]

Changing the render method fixes that as well:

  render() {
    const {style} = this.props;
    return (
      <View style={[styles.container, style]}>
        <Text>React Native for Web</Text>
      </View>
    );
  }

[ipselon]

@msand, I'm sorry for the late response. I just need to get familiar with react native to get what you explain and try this. Sorry for that. I really appreciate your efforts. I promise I'll try that ASAP.

Could you add here a brief instruction how to get react native works with Structor?

[msand]

I've now made a fork of Este and integrated Apollo (to get graphql) and CodePush to get js updates to native apps. https://github.com/msand/este/tree/extended

I think it might be enough to add the structor folder inside the src folder of that repo, and then develop cross platform components in structor, using react-native-web (React Native for Web or rnweb for short). Then these components/pages can be used inside the React Native part of the Este project, closing the circle.

Then one can use any git client to commit and push changes, causing the CI/CD pipeline to do its job. I will try integrating my Structor + RNWeb repo with my Este repo next.

[msand]

It works if I copy the components / modules into my common / browser / native / server folders and import from there. But if I try to import straight from the structor-starter folder into one of the others, I get:

import React from 'react';
^^^^^^
SyntaxError: Unexpected token import

Probably just some webpack/babel configuration issue.

[msand]

Works if I don't use import/export in the components...

[msand]

@ipselon To get React Native working you first have to follow the installation instructions for RN: https://facebook.github.io/react-native/docs/getting-started.html

Then you clone and install the repositories

git clone https://github.com/msand/este.git
cd este
git checkout extended
yarn (or npm install)
yarn add react-native-web (or npm install react-native-web)
cd src
git clone https://github.com/ipselon/structor-starter
cd structor-starter
yarn (or npm install)
yarn add react-native-web structor (or npm install react-native-web structor)
npm run structor

Now create a new structor component called RNWebHelloWorld and copy paste the code from here: https://www.webpackbin.com/bins/-KgucwxRbn7HRU-V-3Bc

Now open /src/browser/home/HomePage.js and add:

import RNWebHelloWorld from '../../structor-starter/app/components/RNWebHelloWorld/';

and add the <RNWebHelloWorld /> tag somewhere.

Now run "gulp" in the root folder of the Este repo and see the syntax error. Now change the import statements to require and the export statement to module.exports (in the RNWebHelloWorld/index.js file) and watch it work! :D

So, just the webpack/babel import/export syntax error issue to solve and it's all done.

To see the same in e.g. the android emulator, do the same modification as in /src/browser/home/HomePage.js but in /src/native/home/HomePage.js and run "gulp android".

Could you try this and see if it works for you the same way?

[msand]

I've simplified the setup and fixed the syntax error.

If you do not have lerna or gulp installed make sure to install those globally first: npm install -g lerna gulp

To develop web:

git clone https://github.com/msand/estructor
cd estructor
lerna bootstrap
cd packages
cd este
gulp

To develop android / ios gulp android gulp ios

To run structor

cd ..
cd structor-starter
npm run structor

[ipselon]

@msand: Wow! You are fast. Will take a look once I have more time a bit later. On a separate note, could you give me your email? Just want to send you an invitation to Slack channel.

BTW, I've already sent you the invitation on email which is provided in your GH profile.

[msand]

Thanks :) my email is [email protected]

[ipselon]

Could you check your email?

[msand]

Done

[msand]

I've added a simpler and more thorough readme to https://github.com/msand/estructor