Project Breakdown

Video tutorial

There is also a video tutorial of the Project Breakdown.

my-helium-app
├── components
│   ├── Hero.tsx
│   └── Testimonial.tsx
├── pages
│   ├── catalog
│   │   ├── test.page.tsx
│   │   └── index.page.tsx
│   ├── courses
│   │   └── @courseSlug.page.tsx
│   ├── index
│   │   └── index.page.tsx
│   └── dashboard
├── renderer
│   ├── _default.page.client.tsx
│   ├── _default.page.server.tsx
│   └── _error.page.tsx
├── locales
│   └── translations.json
├── ti-config.json
└── package.json

/components

The /components directory holds various components that you can use in your Helium app.

/pages

Helium utilizes a file-based routing system which is controlled here. Every folder and file corresponds to a subdirectory of your URL. The catalog/index.page.tsx file corresponds to the /catalog route and the catalog/test.page.tsx corresponds to the /catalog/test route.

/renderer

The /renderer directory holds the _default.page.client.tsx and _default.page.server.tsx files. These are useful for handling client-side vs server-side operations.

/locales

The /locales directory holds the translations.json file. Sync translations from your instance by running npm run update-translations.

ti-config.json

The ti-config.json file connects a Helium app to learning instance(s). This file is generated by running npm run authenticate, but can also be created manually. A typical config holds 2–3 instances for sandbox and production environments.

Projects using @thoughtindustries/helium CLI >2.0.0 will have a content property. Directories provided to content will be parsed for GraphQL operations at deploy time.

{
  "content": [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"
  ],
  "instances": [
    {
      "nickname": "sandbox",
      "instanceUrl": "https://sandbox.thoughtindustries.com",
      "email": "[email protected]",
      "apiKey": "**************"
    },
    {
      "nickname": "production",
      "instanceUrl": "https://production.thoughtindustries.com",
      "email": "[email protected]",
      "apiKey": "**************"
    }
  ]
}