Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tenpamk2/excalibur-vite-vscode-debuggable-template

excalibur excaliburjs template templates typescript vite vitejs vscode

Last synced: about 2 months ago
JSON representation

Excalibur.js Vite template that is debuggable on VSCode

Host: GitHub
URL: https://github.com/tenpamk2/excalibur-vite-vscode-debuggable-template
Owner: tenpaMk2
License: mit
Created: 2023-07-15T14:11:22.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-07-16T00:24:28.000Z (over 1 year ago)
Last Synced: 2023-07-16T01:35:03.319Z (over 1 year ago)
Topics: excalibur, excaliburjs, template, templates, typescript, vite, vitejs, vscode
Language: TypeScript
Homepage:
Size: 347 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

# excalibur-vite-vscode-debuggable-template

![debug](./imgs/debug.png)

This is an Excalibur.js debuggable template for the following environment.

1. Vite
2. VSCode

You can easily debug on VSCode by using this template.

## Requirements💡

1. Node.js

## Get Started🚀

1. Open this repository by VSCode.

2. Open the terminal and execute the following command.

```shell
npm install
```

3. Choose the template.

1. `vanilla-template` : A template for the vanilla Excalibur.js.
2. `tiled-template` : A template for the Excalibur.js with Tiled Plugin.

4. Edit `.vscode/launch.json` at the following line.

```json
"webRoot": "${workspaceFolder}/vanilla-template/"
```

If you want to use `tiled-template` , change the path.

(The following description assumes `vanilla-template` .)

5. Open any source code in `vanilla-template/src/` .

Set the break point by clicking the left point of line numbers.
Then, you can see the red circle as shown in the top image.

6. Execute following command.

```shell
cd vanilla-template
npm run dev
```

7. Start debug by clicking green button in `Run and Debug` pane.

![start debug](./imgs/start-debug.png)

Then, new chrome window will be opened automatically.

8. When the process reach at break point,
it will break as expected❗

## Build💪

Execute following command.

```shell
npm run build
```

If there is no error (eg: TypeScript error),
output will be locate `dist` directory.

## Notes🔴

If you want to use Tiled plugin,
all assets used by plugin must be locate in `public` directory.

This is due to Vite limitations.
Vite controll the files by appending hash to filename.
But, Tiled plugin doesn't support hashed filename.

See also [Vite doc](https://vitejs.dev/guide/assets.html#the-public-directory) .

## Credits💎