rust-react-typescript-demo

This repository contains demo code for my YouTube programming learning series about Rust, React, TypeScript, Docker, Terraform and Kubernetes. For this project, we're creating foodi, a meal logging tool.

This project is intended to serve as an example, and can be used as boilerplate for starting your own project. You can also watch the videos to learn more about how it was built (mostly trial and error, like a lot of things in life 😀).

If you'd like to learn more, check out my other projects:

• 📹 Subscribe to my YouTube channel, or
• 🎮 follow me on Twitch

This repo has the following features:

• Rust, Rocket, & Diesel based backend
• React, Mobx, and TypeScript based frontend
• Parcel for frontend packaging
• Docker image with frontend & backend all-in-one
• Terraform for managing a GKE cluster on GCP
• Kubernetes manifest for running on GKE

You can find the videos on YouTube below:

• 📽 Part 1
• 📽 Part 2
• 📽 Part 3
• 📽 Part 4
• 📽 Part 5
• 📽 Part 6
• 📽 Part 7

In the series, we're building foodi, a web-based meal logger/tracking tool.

Compiling the Rust Backend Server

To build the Rust backend, you will need to install the Rust nightly build with rustup. First, go to https://rustup.rs/ and install rustup. Then, install Rust nightly:

$ rustup default nightly
...

Once you have the nightly build installed, you can build the backend.

Build the Backend

$ cd foodi-backend
$ cargo build
...

Run the Database Migration Scripts

To create the initial database schema, run the migration scripts using diesel:

$ cargo install diesel_cli --no-default-features --features sqlite
...
$ diesel migration run --database-url database.sqlite
...

Building the Backend Server

Lastly, you can now run the backend server:

$ cargo run

Running the Frontend Server

To build and run the frontend assets and server, you will need a recent version of Node.js and Yarn installed. Using homebrew on macOS, you can install it with homebrew:

$ brew install yarn
...

Install package dependencies

Install the frontend package dependencies using Yarn:

$ cd foodi-frontend
$ yarn install
...

Run the Frontend Server

Use parcel to run the frontend development server:

$ parcel index.html
...

Build and run the Docker image

Assuming you have Docker installed, run the build command from the top level of the repo:

$ docker build . -t foodi:latest
...

Once the build completes, run the container, and map port 80 from inside the container to outside the container on port 8080 (on your host machine):

$ docker run -p 8080:80 foodi:latest
...

🎉 Now you can open http://localhost:8080/ in your browser and test the app.