Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carlobortolan/ticktack
Full-stack Rust application using WebAssembly (WASM).
https://github.com/carlobortolan/ticktack
actix-web docker-compose full-stack postgres rust wasm webassembly yew yew-framework
Last synced: 10 days ago
JSON representation
Full-stack Rust application using WebAssembly (WASM).
- Host: GitHub
- URL: https://github.com/carlobortolan/ticktack
- Owner: carlobortolan
- License: gpl-3.0
- Created: 2023-04-30T16:17:23.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-17T23:37:13.000Z (11 months ago)
- Last Synced: 2024-11-10T14:50:25.507Z (2 months ago)
- Topics: actix-web, docker-compose, full-stack, postgres, rust, wasm, webassembly, yew, yew-framework
- Language: Rust
- Homepage: https://ticktack.carlobortolan.com
- Size: 257 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TickTack
A Full-Stack Rust application empowered by WebAssembly (WASM).
> [!IMPORTANT]
> As of February 18, 2024, this project has been put on hold and will probably not be worked on or finished in the near future.
> [!NOTE]
> At the moment_ [___https://ticktack-api.onrender.com___](https://ticktack-api.onrender.com/watches) _hosts the API and_ [___https://ticktack.carlobortolan.com___](https://ticktack.carlobortolan.com) _hosts the Frontend. You can find the docker-repository for the Frontend-image at `docker.io/carlobortolan/ticktack:frontend`.
> __DISCLAIMER__: _This is inspired by the [rust-fullstack-demo](https://github.com/toadslop/rust-fullstack-demo) as seen in [__"Tokyo Rust
Meetup - Fullstack Web Dev in Rust"__](https://www.youtube.com/watch?v=5el5aFoJ8ws) and used to have a fun project for
> experimenting with Rust and WASM._
## FUNCTIONALITY
WASM based web-app that keeps track of the most polular mechanical wristwatches at the time, allowing users to rate and comment their favorite timepieces.
## CONFIG
Start backend
`cargo build`
`cargo install cargo-make`
`cargo run --bin backend`
**OR**
`cargo make start_back_prod`
Start frontend
(`npm install`)
(`npm install -g pnpm`)
(`npm install -g wasm-pack`)
`pnpm install --dir ./frontend`
`pnpm run --dir ./frontend build`
`pnpm run --dir ./frontend dev`
**OR**
`cargo make start_front_prod`
**OR**
`simple-http-server ./frontend/dist -i -p 8000 --nocache --try-file ./frontend/dist/index.html`
> [!NOTE]
> You might have to `Set-ExecutionPolicy RemoteSigned` to run pnpm commands on Windows.
## ITEMS DEMONSTRATED IN THIS APP
### General
* Compile time environment variables
* Runtime environment variables
* Sharing entities between frontend and backend
* Dockerizing Rust frontends and backends
* Running tasks with [Cargo Make](https://github.com/sagiegurari/cargo-make)
### Database
* Object Relational Mapping
* Seeding with random data
* Seeding with CSV data
* Entity Definitions
### Backend
* Routing
* Middleware
* CORS configuration
* Application State
* Database connections
### Frontend
* Asynchronous data fetching
* Functional components
* State management with hooks
* Posting data
* Building with webpack
## RUNNING ON DOCKER
First install Docker.
You can find instructions [here](https://docs.docker.com/get-docker/).
Next, install `docker-compose` to build and run several docker containers simultaneously.
Instructions can be found [here](https://docs.docker.com/compose/install/).
In theory it would be sufficient to run `docker-compose up` and, once everything is up and running, visit http://localhost:8000 to view the app.
Note that docker-compose will start the app in production mode.
To push to your remote docker-repository run:
```
docker-compose up
docker tag ticktack-backend:latest /:backend
docker tag ticktack-frontend:latest /:frontend
docker push /:backend
docker push /:frontend
```
## RUNNING OUTSIDE DOCKER
### Database Installation
This app requires a Postgres 14 database.
Downloads for the various operating systems can be
found [here](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads).
#### Windows
Refer to this [article](https://www.postgresqltutorial.com/postgresql-getting-started/install-postgresql/).
After installation, open your terminal and try running "psql".
Keep in mind that you will need to set the version to 14.
#### Mac
Refer to this [article](https://www.postgresqltutorial.com/postgresql-getting-started/install-postgresql-macos/)
#### Linux
Refer to this [article](https://www.postgresqltutorial.com/postgresql-getting-started/install-postgresql-linux/)
### Database Setup
Once you have a Postgres server up and running, create a database and make sure your database user has read and write
privileges.
Example:
```bash
sudo -u postgres psql
create database rustfullstack;
create user rustuser with encrypted password 'password';
grant all privileges on database rustfullstack to rustuser;
exit
```
NOTE: If you get an error message saying "connection refused", your postgres server may have installed on port 5433
rather than the default 5432. To resolve this, try using the -p flag as follows:
```bash
sudo -u postgres psql -p 5433
```
### ENV file
You'll need a file to hold necessary environment variables.
If you're running docker, it should be named `docker.env` and contain the following:
```
FRONTEND_HOST=localhost
FRONTEND_PORT=8000
FRONTEND_PROTOCOL=http
DATABASE_PROTOCOL=postgres
DATABASE_PORT=5432
DATABASE_URL=
POSTGRES_USER=
POSTGRES_PASSWORD=
POSTGRES_DB=
POSTGRES_HOST=
BACKEND_HOST=localhost
BACKEND_HOST_INTERNAL=0.0.0.0
BACKEND_PORT=8080
BACKEND_PROTOCOL=http
```
If you're running it outside of docker, the file should be called `.env` and should contain the following:
```
FRONTEND_HOST=localhost
FRONTEND_PORT=8000
FRONTEND_PROTOCOL=http
DATABASE_PROTOCOL=postgres
DATABASE_PORT=5432
DATABASE_URL=
POSTGRES_USER=
POSTGRES_PASSWORD=
POSTGRES_DB=
POSTGRES_HOST=
BACKEND_HOST=localhost
BACKEND_PORT=8080
BACKEND_PROTOCOL=http
```
### Running the App
[Cargo Make](https://github.com/sagiegurari/cargo-make) as a task running to simplify starting and stopping the
application.
To use cargo make, run `cargo install cargo-make`.
To start the application in development mode, run `cargo make start_all`.
To start the application in production mode, run `cargo make start_all_prod`.
Note: On Windows, you might see the following error:
```powershell
[webpack-dev-middleware] Error: spawn npm ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:285:19)
at onErrorNT (node:internal/child_process:483:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn npm',
path: 'npm',
spawnargs: [ 'install', '-g', 'wasm-pack' ]
}
```
If you get this error, run the following command and then try again:
```
npm install -g wasm-pack
```
To view all the available tasks, open [Makefile.toml](/Makefile.toml).
## CONTRIBUTING
Contributions are welcome! If you find a bug or have an idea for a new feature, please open an issue or submit a pull
request.
## LICENSE
This project is licensed under the GPL-3.0 license. See the [LICENSE](LICENSE) file for details.
---
© Carlo Bortolan
> Carlo Bortolan ·
> GitHub [carlobortolan](https://github.com/carlobortolan) ·
> contact via [[email protected]](mailto:[email protected])