The Application
The application generated is setup to use typescript.
While typescript is used to validate your .ts
code, Electrode X actually uses Babel to transpile your code.
#
The Files and DirectoriesYour app consists of these essential top level directories and files:
Files and Dirs | Description |
---|---|
package.json | node.js/npm package.json |
xrun-tasks.ts | The file that loads Electrode X's development tasks for xrun task runner |
tsconfig.json | Typescript config |
babel.config.js | Babel config |
.browserslitsrc | configuration for browserslist |
static | static web assets |
src | Directory for your app's source code |
src
Directory#
The The src
directory is where your app's code is. The sample app we created for you contains these files:
Everything under
src/server
are source for your app's node.js server.There are four SubApps defined in the sample app:
SubApp name | Location |
---|---|
Demo1 | src/demo1 |
Demo2 | src/demo2 |
Demo3 | src/demo3 |
home | src/home |
#
Creating a SubAppA SubApp is just a React Component that can incorporate extra features Electrode X offer, and will be dynamically imported. You can render a page with multiple SubApps on it, each with its own independent behaviors, such as enabling SSR, or using different data models.
To create a SubApp:
- First create your
.tsx
file, say "hello.tsx", and export asubapp
that's aReactSubApp
type:
- Next declare your SubApp in another file, say "app.tsx", and use the
declareSubApp
API and dynamic import your subapp.
#
Rendering A SubAppAfter you create a SubApp, you can render it on a page on the node.js server using the PageRenderer
class API, and then send the result back to the browser.
For example, in src/server/routes.ts
, declare a fastify plugin to register a route that render the page with the Hello
SubApp on it.