ghost-portal/examples/tut-001.md

basic scaffolding

To add a top-level application, some basic setup is required. This is only applicable for new top-level apps, i.e. like we currently have extrinsics, storage, accounts, etc. When just hacking away on a specific app, this section is not needed.

basic setup

Initially we would need an new application folder to be added under packages. For the sake of this tutorial, we have just created app-example, a basic app that will be used in the rest of the tutorials.

Once created, initialise the app with package.json, README.md, LICENSE.md and the basic folder setup under src

creating an app entry

First off, let's create an app entry. Since we will just have a basic sample, let's keep it simple for now. Under our example src we just create an index.tsx with a simple entry point.

import React from 'react';

export default class App extends React.PureComponent<any> {
  render () {
    return (
      <div>hello world</div>
    );
  }
}

(We have kept the original, which has changed as the tutorial progresses as index-001.tsx)

making it visible

Once the app is created, it needs to be hooked up to the rest, allowing TypeScript, Jest & Webpack to find it and use it.

• To enable Jest mappings, add the name of the app to the Jest config
• To enable TypeScript mappings, add the app to the TypeScript config
• To allow the app to be included in the Webpack build, add it to Webpack config (Note that this is not high-level, but rather at the entry point of the loader - this allows packages to have their own configs in the case of demos)

At this point the application will be available and included, even though it does not have a navigation entry yet. Adding the navigation -

• Add a reference to the application to the apps package.json
• Add a route file the defines the app, name & icon
• Finally include the route in the route index

running!

Basic app added, now let it run and see what it does.

• Start the webpack server via WS_URL=wss://poc-2.polkadot.io:9944 yarn run start
• Access the applcation on localhost:3000/#/example

that is it

We have something basic wired-up, now let's build something