# 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](../packages). For the sake of this tutorial, we have just created [app-example](../packages/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](../packages/app-example/src) we just create an `index.tsx` with a simple entry point.

```js
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](../packages/app-example/src/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](../jest.config.js)
- To enable TypeScript mappings, add the app to [the TypeScript config](../tsconfig.json)
- To allow the app to be included in the Webpack build, add it to [Webpack config](../packages/apps/webpack.config.js) (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](../packages/apps/routing) yet. Adding the navigation -

- Add a reference to the application to the [apps package.json](../packages/apps/package.json)
- Add a route file the defines the [app, name & icon](../packages/apps/src/routing/example.ts)
- Finally include the route in the [route index](../packages/apps/src/routing/index.ts)

# 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](http://localhost:3000/#/example)

# that is it

We have something basic wired-up, now let's [build something](tut-002.md)