Building a Dockerized Todo App With React, Chakra UI and Rust

A Dockerized todo app is a to-do list application that is packaged and run within a Docker container. By using Docker to create a container for the app, it makes it easier to run, scale and deploy.

By using Docker, you can ensure consistent behavior across different environments, from development to production. In this guide, we will walk you through how to build a Dockerized todo app using React for the frontend, Chakra UI for styling and Rust for the backend development using Docker and a Docker Compose file.

What each technology is used for:

• Frontend: React + Chakra UI: React provides a powerful and efficient frontend framework, while Chakra UI offers a set of accessible and customizable components for rapid UI development.
• Backend: Rust is highly regarded for its performance and safety features, serving as a robust backend language.
• Deployment: Docker and Docker Compose: Dockerizing this stack ensures easy deployment and scalability, allows for efficient resource utilization and simplifies the development process by providing a consistent environment for all team members.
• Database: MongoDB provides a flexible, document-based data model that’s ideal for storing and retrieving todo items.

Step 1: Setting Up Your Environment: Install Docker, Docker Compose, Rust and Node

Ensure you have Docker, Node and Rust installed in your development environment. If you have the software installed, you can skip this step and move to Step 2.

If not, run the following commands in your terminal to install Docker, Node and Rust.

To install Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

To install Docker

Follow this link: https://docs.docker.com/engine/install/

More information can be found on the following Rust, Node.js and Docker websites.

Step 2a: Create React App

Create your React project by using this command:

create-react-app
npx create-react-app frontend
cd frontend

Step 2b: Install Chakra UI 

Use the command below to install Chakra UI on your React project.

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion axios

Step 3: Build the Todo List UI

Modify src/App.Js to include the todo app functionality. Here is a simple sample script below:

Explanation:

• State management: useState is used to manage the todos and new task input.
• Chakra UI components: VStack, HStack, Box, Button and Input are used to create the layout.
• Todo functions: addTodo, toggleComplete and deleteTodo handle the main functionality.

Step 4: Run the React App Without Using Docker

To start the development server, run the following command:

npm start

Step 5: Dockerizing the React App

Navigate to the frontend folder and create a new Dockerfile with the code below:

Stage 1: Build the React app

Stage 2: Serve the app using NGINX:

Step 6: Setting Up the Rust Backend

Next, you’ll need to use Warp, which is a modern, lightweight and fast web framework for building web applications and APIs written in Rust. Find more information on Warp here. To create a backend for your project using Rust, run the command below:

cargo new backend
cd backend

Create a file with the name Cargo.toml (if it does not exist) and copy and paste the code below in the new file Cargo.toml:

Step 7: Implement the Todo API Backend

Replace the contents of the src/main.rs with the code below, which defines your two functions and creates the routes add and list. The backend code connects to the MongoDB service running in the Docker Compose setup.

Step 8: Create the Dockerfile for the Backend

Navigate to the backend folder and create a new Dockerfile with the code below:

Step 9: Create the Dockerfile for the Frontend, Backend and Database

You will configure Docker Compose to spin up the frontend (React), backend (Rust) and database (MongoDB).

Create a new file called docker-compose.yml in the root project, which will contain the definition of the services.

Copy and paste the code snippet below in the newly created file docker-compose.yml:

Step 10: Running the App with Docker Compose

You can now run the entire application stack using Docker Compose. Run the command below:

docker-compose up --build

The command above will:

• Build and run the Rust backend API on localhost:8000
• Build the React frontend and server it on localhost:3000
• Set up MongoDB on localhost:27017

Conclusion

Using React, Chakra UI and Rust together creates an efficient, manageable application architecture.

Docker plays a significant role in containerizing your application, allowing for efficient deployment across different environments. By choosing React and Chakra UI for your frontend, you’ll benefit from a robust and accessible user interface, while Rust can deliver a strong performance and safety on the backend.

To see the complete code and learn more, don’t forget to check out the project on GitHub.

Want to leverage the power of Docker platforms? Then check out Andela’s step-by-step guide, “Dockerize a Rust Application with AWS ECR and GitHub Actions.”

The post Building a Dockerized Todo App With React, Chakra UI and Rust appeared first on The New Stack.