🚀 Full Stack Yew and Rocket Template

This full-stack template combines the power of Yew on the frontend and Rocket on the backend to help you kickstart your web application development. It provides a solid foundation for building real-time, interactive, and responsive web applications.

Features

• Rust All The Way: Write your web application entirely in Rust, ensuring type safety and performance.
• Yew Frontend: A modern, Rust-based frontend framework for building interactive web applications.
• Rocket Backend: A web framework for Rust with great flexibility and speed.
• Sled Database: Utilize Sled as the database for efficient data storage and retrieval.
• CRUD Operations: Set up Create, Read, Update, and Delete operations easily.

Prerequisites

Before you begin, ensure you have met the following requirements:

• Rust: Make sure you have Rust and Cargo installed. If not, visit rust-lang.org/learn/get-started for installation instructions.

• Trunk: This project uses Trunk for building the Yew frontend. You can install Trunk with Cargo by running:

  cargo install --locked trunk

  For more information about Trunk, visit thedodd/trunk.

• wasm32-unknown-unknown Target: To build WebAssembly files, you need to add the wasm32-unknown-unknown target to your Rust toolchain. You can add it by running:

  rustup target add wasm32-unknown-unknown

  This target is essential for compiling Rust code to WebAssembly.

Getting Started

Follow these steps to get your project up and running:

1. Use this template: Click on the green "Use this template" Button.

2. Clone the Repository: Clone this repository to your local machine.

   git clone https://github.com/your-username/rocket-yew-starter-pack.git
   cd rocket-yew-starter-pack

3. Install Dependencies: Use cargo to install the required dependencies for both the frontend and the backend.

   # Install frontend dependencies
   cd client
   trunk build --release
   
   # Install backend dependencies
   cd ../server
   cargo build --release

4. Run the Application: Start the backend server and the frontend development server.

   # Start the backend
   cargo shuttle run --release
   
   # Start the frontend development server
   cd client
   trunk serve --port 3000 --release

5. Access the Application: Open your web browser and go to http://localhost:3000 to access the application.

Project Structure

The project follows a structured layout:

• client/: Contains the Yew frontend code.
• server/: Contains the Rocket backend code.

Usage

Here are some common tasks you can perform with this template:

• Add API Routes: Define your API routes in server/src/routes.rs.
• Modify Frontend: Customize the frontend by editing the files in client/src/.

Deployment

In order to deploy the Rocket backend using shuttle, the first step is to install the shuttle command-line interface (CLI). This can be achieved by executing the following command:

curl -sSfL https://www.shuttle.rs/install | bash

Once the shuttle CLI is successfully installed, the next step is to log in to the shuttle platform using the cargo shuttle login command. This ensures that the deployment process is associated with the correct shuttle account:

cargo shuttle login

After successful authentication, the deployment itself can be initiated with the following command:

cargo shuttle deploy --allow-dirty

For deploying the Yew frontend on Netlify, a crucial step is configuring the BASE_URL to correctly point to the backend server that is deployed on shuttle.

rocket-yew-starter-pack/client/src/main.rs

Line 8 in 2e7a5ba

const BASE_URL: &str = "http://127.0.0.1:8000";

Following the configuration of the BASE_URL, the next step involves pushing the contents of the client/dist folder into a GitHub repository. This ensures that the latest version of the frontend is stored and can be easily accessed for deployment purposes.

To proceed, initiate the GitHub repository by executing the necessary commands, such as:

git init
git add dist
git commit -m "Initial commit"
git branch -M main
git remote add origin <you_repository_url.git>
git push -u origin main

Replace <you_repository_url.git> with the actual URL of your GitHub repository.

Having successfully pushed the contents to GitHub, the subsequent task is deploying the frontend on Netlify.

1. Log in to Netlify and navigate to the "Sites" tab.
2. Click on "New site from Git" and connect to your GitHub repository.
3. Configure the build settings, specifying the build output directory to dist.
4. Deploy the site.

Netlify will automatically trigger builds whenever changes are pushed to the connected GitHub repository.

Contribution

Contributions are welcome! Feel free to submit issues, feature requests, or pull requests to improve this template.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Yew and Rocket communities for their amazing libraries and documentation.

Happy coding! 🚀🦀