# Optional: GitHub Codespaces

If you want, you can use GitHub Codespaces as an IDE.

* Go to the Stages Template at <https://github.com/CharHubAI/stage-template>.
* Click on 'Use this template' -> 'Open in a codespace'.

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FsJFIED172Pu9Hrqt9NKP%2FScreenshot%20from%202024-04-10%2005-01-43.png?alt=media&#x26;token=69e31016-6d09-4c1b-8479-8a4ad05db4e4" alt="" width="375"><figcaption></figcaption></figure>

* In the codespace that opens up, go to the terminal at the bottom and enter:

```
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.2/install.sh | bash
nvm install 21.7.1
yarn install
yarn dev --host
```

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FdfgZZMmirapU5hBEFHBi%2Fcodespace-terminal.jpg?alt=media&#x26;token=aab10a70-c442-4d24-888e-745d67546838" alt="" width="375"><figcaption><p>The terminal's location in the Codespace window.</p></figcaption></figure>

* Follow the prompt to open the browser window. This is the running stage.&#x20;

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FisKW0I0hDRAfsdtFlLof%2Fcodespace-open-browser.jpg?alt=media&#x26;token=305ec272-ca05-4a38-ad09-1f361e1599ec" alt="" width="375"><figcaption></figcaption></figure>

* You can skip ahead to the other sections in this guide for a while to work on it, or go straight to the rest of the setup.
* To push your changes, go to 'Source Control' -> 'Publish Branch'

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2F9GU4XeU0FSX8CSpz9SVq%2Fpublish-branch.jpg?alt=media&#x26;token=7f65f3af-ff56-4eae-943d-431e5fc2f182" alt="" width="375"><figcaption></figcaption></figure>

* A message will come up in the lower right with a link to the new project.

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2F8xbLanl4ETEwPzppANXx%2Fcodespace-open-github.jpg?alt=media&#x26;token=6f9cc11c-dc5a-4a4c-8476-c9c29f8f6b88" alt="" width="375"><figcaption></figcaption></figure>

* For the build to submit to Chub, you'll have to [add an API key. ](#adding-a-write-token)

## Adding an API Key

For your changes to push to Chub, you'll need to add a token to the secrets of your GitHub project. From the main page of your new project, go to 'Settings' -> 'Secrets and Variables' -> 'Actions' -> 'Repository secrets' -> 'New Repository Secret'.

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FTFPClsw1JovKhiGVIOiZ%2Fsettings.jpg?alt=media&#x26;token=be47b07c-fea8-4710-875f-8a6ffc674dcc" alt="" width="375"><figcaption><p>Where the settings tab is located on the GitHub page for your project.</p></figcaption></figure>

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FSf221ypyqpuVGRKmAHIi%2Fadd-secret.jpg?alt=media&#x26;token=c8cd58fd-7a8b-4126-ba02-dfcfbde07f5b" alt="" width="334"><figcaption></figcaption></figure>

* Add the token with the name 'CHUB\_AUTH\_TOKEN'. You can get a write token from <https://chub.ai/my_stages?active=tokens>. &#x20;

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FRY80yLp0sRUvyjS5sFQE%2Fadd-auth-secret.jpg?alt=media&#x26;token=d9011708-30b4-468a-ad24-727a1e94b491" alt="" width="375"><figcaption></figcaption></figure>

* The next time you push, a stage project will be created in Chub and show up in your stages. To make this happen without a push, go to 'Actions' and rerun the failed push workflow:

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FQTvG2rtCFHr0VFnmhcnC%2Factions.jpg?alt=media&#x26;token=f8a8a60b-9963-4ad1-8d97-b97ebf951e11" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FUy0RZAa3loSjzJqw5wF8%2Factions-failed.jpg?alt=media&#x26;token=82f21031-5c69-47ca-b29d-7d8adeae0dd2" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FdAmPkZfHuPgOjCSOqkzg%2Frerun-action.jpg?alt=media&#x26;token=d6a97a4d-a32d-4cf6-b021-a7b05aac676a" alt="" width="375"><figcaption></figcaption></figure>

#### That's it! Whenever you push changes, the GitHub Action will run and update the project in Chub.&#x20;

If you find the heavy comments in the template annoying, in any \*.ts\* file use the regex

```python
// .*|/\*\*\*.*?(\n|\r|.)*?\*\*\*/
```

in anything that supports regex editing (Intellij, et cetera) and delete them all.

In any \*.yaml, use:

```python
# .*
```

## In-Chat Live Coding vs the Test Runner

By default, when you run a stage in development, rather than waiting for a chat that may not exist it uses the test runner, which is in src/TestRunner.tsx. There are some example tests in the template, and the initialization data it uses is in src/assets/test-init.json.

If you'd rather edit with a live chat, it's most straightforward when running locally. Just add the stage to a chat in chat settings (you'll need to have pushed at least once so the stage exists), then hit 'Edit' and add the localhost URL.&#x20;

For a GitHub Codespace, it's slightly more involved. Run the project with the flag "--mode staging" set so that the TestRunner isn't run. When you do this, the corner popup has a button to 'Make Public' the running space. Press this.

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FdT8OVE1TGm5dBLEXuj30%2Fopen_port.jpeg?alt=media&#x26;token=09e3e75d-695d-4473-99a1-b7693b63fb3e" alt=""><figcaption></figcaption></figure>

If you miss this, you can change it in settings instead:

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FVgHUDsl20WuLU0RCVsxH%2Falt_open_port.jpeg?alt=media&#x26;token=fe74b6f0-314a-4628-a934-b0fafa71af67" alt=""><figcaption></figcaption></figure>

Once you're running locally or in the Codespace, go to "Chat Settings", hit 'Edit', and put in the URL.

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2FA0mE4MantYZYhosGP1QD%2Feditor_settings.jpeg?alt=media&#x26;token=66155dd7-6701-451c-a241-7cbaebb112ac" alt=""><figcaption></figcaption></figure>

If using a Codespace, you'll have to confirm before it will run. You may have to refresh the page after doing this.

<figure><img src="https://2344291215-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAKsJdjrPkq5TnML4IXif%2Fuploads%2Fu2p2cIqJ3Bn7b96lkRxH%2Fconfirm_see.jpeg?alt=media&#x26;token=99c2bd15-6b20-4a55-99b5-013dbaa9b09d" alt=""><figcaption></figcaption></figure>

#### Other Online IDEs

In theory a similar process would work with CodeSandbox as long as it was connected to your GitHub project and committed to it correctly, but it hasn't been tried and a guide written yet. If you have some other preferred platform, let us know.
