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

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 name	Location
Demo1	src/demo1
Demo2	src/demo2
Demo3	src/demo3
home	src/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
};

2. 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);
    }
  });
}