Page Comparison

...

The app should start in a new browser window.

...

The app can be debugged in a regular way, press Cmd+Option+J to display the debugger

Code structure

The React template app structure is very basic

/src - the folder containing application source code.

/build - the folder when the app gets built

/public - static files that will be bundled with the app

Main app component resides in /src/App.tsx. Lets have a look at it

import React from 'react';
import { useSettings } from '@ombori/ga-settings';
import logo from './logo.svg';
import './App.css';

import { Schema as Settings } from './schema';

function App() {
  const settings = useSettings<Settings>();

  const productName = settings?.productName;
  const productPrice = settings?.productPrice;

  if (!settings) {
    return <div className="App">Loading gridapp settings...</div>
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Product name: {productName}</p>
        <p>Product price: {productPrice}</p>
      </header>
    </div>
  );
}

export default App;

Settings

When started, every application receives a settings object, that contains values that can be changed without recompiling the app. During the local development settings are stored in /src/settings/index.json file.

Settings can be used from react components using useSettings() hook imported from @ombori/ga-settings package.

Because settings are loaded dynamically, useSettings may return falsy value when loading is not yet complete.