53 lines
2.5 KiB
Markdown
53 lines
2.5 KiB
Markdown
# 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)
|