Skip to main content

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

There is also a video tutorial of the Project Breakdown that can be found here.

/components​

The /components direcotory 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 correponsds 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. More can be read about routing with Helium in our routing documentation.

/renderer​

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

/locales​

The /locales directory holds the translations.json file. The traslations.json file holds translations that are created in a learning instance. The file can be synced to the latest translations by running the npm run update-translations command.

ti-config.json​

The ti-config.json file holds the data that connects a Helium app to a learning instance(s). This file is generated by running the npm run authenticate command, but it can also be created manually. A typical ti-config.json would hold 2 - 3 learning instances which would allow developers to preview changes in a sandbox enviorment before pushing to production. An example ti-config.json can be seen here:

Helium projects using the @thoughtindustries/helium CLI >2.0.0, the ti-config.json will have a content property, e.g.:

{
  "content": [
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}'
  ],
  "instances": {...}
}

Directories provided to the content property will be parsed for GraphQL operations at deploy time.

// an example ti-config.json

{
  "instances": [
    {
      "nickname": "sandbox",
      "instanceUrl": "https://sandbox.thoughtindustries.com",
      "email": "[email protected]",
      "apiKey": "**************"
    },
    {
      "nickname": "production",
      "instanceUrl": "https://production.thoughtindustries.com",
      "email": "[email protected]",
      "apiKey": "[email protected]"
    }
  ]
}

Still have a question?​

Get your questions answered in our Developer Discord.