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 hosts the API and 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 as seen in "Tokyo Rust Meetup - Fullstack Web Dev in Rust" and used to have a fun project for experimenting with Rust and WASM.
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.
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 RemoteSignedto run pnpm commands on Windows.
- Compile time environment variables
- Runtime environment variables
- Sharing entities between frontend and backend
- Dockerizing Rust frontends and backends
- Running tasks with Cargo Make
- Object Relational Mapping
- Seeding with random data
- Seeding with CSV data
- Entity Definitions
- Routing
- Middleware
- CORS configuration
- Application State
- Database connections
- Asynchronous data fetching
- Functional components
- State management with hooks
- Posting data
- Building with webpack
First install Docker. You can find instructions here.
Next, install docker-compose to build and run several docker containers simultaneously.
Instructions can be found here.
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 <docker-username>/<docker-repository>:backend
docker tag ticktack-frontend:latest <docker-username>/<docker-repository>:frontend
docker push <docker-username>/<docker-repository>:backend
docker push <docker-username>/<docker-repository>:frontend
This app requires a Postgres 14 database.
Downloads for the various operating systems can be found here.
Refer to this article.
After installation, open your terminal and try running "psql". Keep in mind that you will need to set the version to 14.
Refer to this article
Refer to this article
Once you have a Postgres server up and running, create a database and make sure your database user has read and write privileges.
Example:
sudo -u postgres psql
create database rustfullstack;
create user rustuser with encrypted password 'password';
grant all privileges on database rustfullstack to rustuser;
exitNOTE: 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:
sudo -u postgres psql -p 5433You'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=<SECRET>
POSTGRES_USER=<SECRET>
POSTGRES_PASSWORD=<SECRET>
POSTGRES_DB=<SECRET>
POSTGRES_HOST=<SECRET>
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=<SECRET>
POSTGRES_USER=<SECRET>
POSTGRES_PASSWORD=<SECRET>
POSTGRES_DB=<SECRET>
POSTGRES_HOST=<SECRET>
BACKEND_HOST=localhost
BACKEND_PORT=8080
BACKEND_PROTOCOL=http
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:
<e> [webpack-dev-middleware] Error: spawn npm ENOENT
<e> at ChildProcess._handle.onexit (node:internal/child_process:285:19)
<e> at onErrorNT (node:internal/child_process:483:16)
<e> at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
<e> errno: -4058,
<e> code: 'ENOENT',
<e> syscall: 'spawn npm',
<e> path: 'npm',
<e> spawnargs: [ 'install', '-g', 'wasm-pack' ]
<e> }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.
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.
This project is licensed under the GPL-3.0 license. See the LICENSE file for details.
© Carlo Bortolan
Carlo Bortolan · GitHub carlobortolan · contact via carlobortolan@gmail.com