Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brklntmhwk/dev-container-tauri
https://github.com/brklntmhwk/dev-container-tauri
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/brklntmhwk/dev-container-tauri
- Owner: brklntmhwk
- Created: 2023-08-31T02:39:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-08T08:37:20.000Z (over 1 year ago)
- Last Synced: 2023-09-08T09:47:59.082Z (over 1 year ago)
- Language: TypeScript
- Size: 1.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dev Container for Tauri
This is a playground for [Tauri](https://tauri.app/) app development. You can leverage the hot reloading feature of Tauri(or rather Vite?) inside the Docker container.
~~At the moment, Neither hot reloading nor even reloading work properly on the VNC display in the container, and the cause is still under investigation.~~
→ On Windows, using [WSL2(Windows Subsystem for Linux 2)](https://learn.microsoft.com/ja-jp/windows/wsl/install) resolved the problem and also saved a large amount of time at building containers and compiling Rust backend.
Keywords:
- Windows, WSL2, Linux, VS Code, Dev Containers, Docker, Tauri, Vite, Rust, React, TypeScript, PostgreSQL
## Prerequisites
- You have installed:
- [Docker Desktop](https://www.docker.com/products/docker-desktop/)
- [VS Code](https://code.visualstudio.com/)
on your local machine.
- You have added the following VS Code extensions:
- [Dev Containers](https://code.visualstudio.com/docs/devcontainers/tutorial) ([Remote Development](https://code.visualstudio.com/docs/remote/remote-overview) for Windows users instead)
## Notes
- It's unclear whether this works properly on Mac OS
- **If you use Windows PC, then use WSL2, otherwise hot reloading cannot fire, which leads to tremendous inconvenience**
## How to use
1. Run your Docker Desktop
2. Create the docker image and run the container
- Select the menu "Dev Containers: Reopen in Container".
- You could also select "Reopen in Container" in a pop-up toaster that appears at the bottom right on VS Code when opening
- 
3. Create your Tauri app template
\* **Skip this if you use the existing tauri-example or git clone other repos**
- Execute the command:
```
yarn create tauri-app
```
- Follow the prompts and choose your preferences
- In tauri-example, they are the followings:
- Project name: *tauri-example*
- Choose which language to use for your frontend: *TypeScript / JavaScript*
- Choose your package manager: *yarn*
- Choose your UI template: *React*
- Choose your UI flavor: *TypeScript*
4. Move to the project directory
```
cd ${--Project name here--}
```
5. Add dependencies in package.json to the project
```
yarn
```
6. Open a dev browser
- Execute the command:
\* **It could take some minutes the first time because of having to building backend. Later, it would be much faster by using cache.**
```
yarn tauri dev
```
- Open localhost:6080 (the port number is defined in devcontainer.json)
- http://localhost:6080/
- Connect to noVNC with the password set in devcontainer.json ("vscode" in this example)
- 
- Now all taken care of! It automatically detects changes on both frontend and backend and reflects them on the browser by hot reloading.
- \* **It could be tremendously slow when it comes to backend though. In that case, stop dev server during tinkering with backend.**
- 
## How to check database connections via CLI
Execute the command below
```
psql -d db -U postgres -h localhost
```
and then,
- ```\l``` returns list of databases
- ```\c ${Name of your database here}``` moves you to the database specified
- ```\dt``` returns list of relations
- ```\d ${Name of your database table here}``` returns the definition of the table specified
- 