React ReactJS Sample with Back4App, ParseApp Server

tutorials
1

During our reactjs course someone asked about Parse… Then I was asked about it again recently so I figure it was worth checking back in on my old friend, the king of the hill before @Firebase came along

Share thoughts or feedback as issues in the repo
Source Code => aaronksaunders/ionic-react-back4app1 GitHub - aaronksaunders/ionic-react-back4app1: WIP starter react ionic framework project tabs with authentication using back4app / parse server

Ionic ReactJS Back4App Sample Application

WIP starter react ionic framework project tabs with authentication using back4app / parse server

Updating some very old parse code to utilize back4app parse functionality along with Ionic Framework React Components, and of course Capacitor to deploy it to your mobile device

Adding your own configuration file parse.config

const config = {
    APP_ID : "",
    JS_KEY : "",
    GRAPHQL_URI : ""
}

export default config;

Adding GraphQL Support

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";
import PARSE_CONFIG from './parse-config'


  const client = new ApolloClient({
    uri: PARSE_CONFIG.GRAPHQL_URI,
    headers: {
      "X-Parse-Application-Id": PARSE_CONFIG.APP_ID,
      "X-Parse-Javascript-Key":PARSE_CONFIG.JS_KEY
    }
  });

and wrap you top level component with the provider

  return (
    <ApolloProvider client={client}>
      <IonApp>
        <IonReactRouter>
          <Switch>
            <Route exact path="/login" component={Login} />
            <Redirect exact from="/" to="home" />
            <IonRouterOutlet>
              <ProtectedRoute name="home" path="/home" component={TabRoot} />
            </IonRouterOutlet>
          </Switch>
        </IonReactRouter>
      </IonApp>
    </ApolloProvider>
  );
2

I have updated this project for those looking for an alternative database to use or if you are an old head who remembers when Parse was the King!!

1 Like