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 Directories#

Your app consists of these essential top level directories and files:

Files and DirsDescription
package.jsonnode.js/npm package.json
xrun-tasks.tsThe file that loads Electrode X's development tasks for xrun task runner
tsconfig.jsonTypescript config
babel.config.jsBabel config
.browserslitsrcconfiguration for browserslist
staticstatic web assets
srcDirectory for your app's source code

The src Directory#

The src directory is where your app's code is. The sample app we created for you contains these files:

src
├── app.tsx
├── demo1
│ └── index.tsx
├── demo2
│ ├── index.tsx
│ └── reducers.ts
├── demo3
│ ├── index.tsx
│ └── react-query-fetch.ts
├── home
│ ├── index.tsx
│ ├── message.ts
│ └── static-props.tsx
├── import-assets.d.ts
├── info.ts
├── server
│ ├── config.ts
│ ├── index.ts
│ └── routes.ts
└── styles
├── demo1.mod.css
└── demo1.mod.styl
  • Everything under src/server are source for your app's node.js server.

  • There are four SubApps defined in the sample app:

SubApp nameLocation
Demo1src/demo1
Demo2src/demo2
Demo3src/demo3
homesrc/home

Creating a SubApp#

A 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:

  1. First create your .tsx file, say "hello.tsx", and export a subapp that's a ReactSubApp type:
import { React, ReactSubApp } from "@xarc/react";
const Hello = () => <div>Hello, World</div>;
export const subapp: ReactSubApp = {
Component: Hello
};
  1. Next declare your SubApp in another file, say "app.tsx", and use the declareSubApp API and dynamic import your subapp.
import { declareSubApp } from "@xarc/react";
export const Hello = declareSubApp({
name: "Hello",
getModule: () => import("./hello")
});

Rendering A SubApp#

After 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.

import { Hello } from "../app";
import { PageRenderer } from "@xarc/react";
import { ElectrodeFastifyInstance } from "@xarc/fastify-server";
export async function fastifyPlugin(server: ElectrodeFastifyInstance) {
const helloRenderer: PageRenderer = new PageRenderer({
pageTitle: "Hello",
subApps: [{ name: Hello.name, ssr: true }]
});
server.route({
method: "GET",
url: "/hello",
async handler(request, reply) {
const context = await helloRenderer.render({ request });
reply.type("text/html");
reply.send(context.result);
}
});
}