Late Night Confessions — Building a Website Using Rust, Rocket, Diesel, and Askama — Part 1
Tags: tutorial, rust, rocket, diesel
Published: 2021-04-16 12:36:02

---
title: Late Night Confessions — Building a Website Using Rust, Rocket, Diesel, and Askama — Part 1
published: true
date: 2021-04-15 16:07:37 UTC
tags: tutorial,rust,rocket,diesel
canonical_url: https://medium.com/perimeterx/late-night-confessions-building-a-website-using-rust-rocket-diesel-and-askama-part-1-aeccade43252
cover_image: https://cdn-images-1.medium.com/max/1024/1*HsCIw5hsVG8DzIQuQ6XMJw.jpeg
series: Late Night Confessions — Building a Website Using Rust, Rocket, Diesel, and Askama
---

##### Cover Photo by [Hanbyul Jeong](https://unsplash.com/@thebyul?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/late-night?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)


It’s 1:00 AM (🎵 soft jazz music). You’re lying in bed trying to get some sleep. The city lights shine into your bedroom, softly illuminating the wall in front of you. You can hear the rain outside and the sound of people going about their late-night business. You can’t fall asleep. Something is bothering you, and you feel like you have to get it off your chest. You have to tell someone, but you don’t want to do it on social media. You want to spill your guts but remain completely anonymous. If only there was a place you could do this…

This is the setting we are going to use for the project of this post —  **Late Night Confessions** : A 🦀 Rust-based website built using [Rocket](https://rocket.rs/) (web framework), [Diesel](http://diesel.rs/) (ORM), and [Askama](https://github.com/djc/askama) (template rendering engine).

### Overview

The site functionality is pretty simple:

1. Show the user a random confession.
2. Allow the user to add a new confession.

Since we want to keep our confessions anonymous, we will not create a signup or login form.

Our site has three types of requests to handle:

- Static content requests — to get static files (i.e., _index.html_, _styles.css_)
- API request to get a confession.
- API request to post a confession.

All confessions will be saved in a Postgres database instance. We will use Diesel to manage the database activities.

Our finished project will look something like this:

![](https://cdn-images-1.medium.com/max/1024/1*tlJAI985s9Racs0c_kiTYw.png)

The full source code can be found on [Github](https://github.com/jtordgeman/late-night-confessions).

### Launching a 🚀

We begin by creating a new crate for our project called _late-night-rocket:_

```
cargo new late-night-rocket
```

Next, let’s add _Rocket_ and _Failure_ as dependencies to our _Cargo.toml_:

{% gist https://gist.github.com/pxjohnny/ebffab18d2fc38952a0a6a3c5f3be5fc %}

> 🔭 Why do we need to specifically specify the_ `0.5.0-dev` version? Since we want our app to run on a stable Rust release, `0.5.0-dev` is (_as of writing this post_) the only version that supports stable Rust.

Rocket makes heavy use of macros. This means our first order of business is to import all of them to our crate. We do this by adding the `macro_use` attribute to the top of our _main.rs_ file, pointing to the Rocket crate:

{% gist https://gist.github.com/pxjohnny/2269a209a8d36df45c05cd2989acfc29 %}

Next, let’s add some `use` statements to import modules we would need:

{% gist https://gist.github.com/pxjohnny/a271b1c7c06659066d404a743bedbdff %}

Finally, it’s time to create some routes!

1.&nbsp;We begin with the `root` route responsible for rendering the content of _index.html_ when the `/` path is called:

{% gist https://gist.github.com/pxjohnny/5017f529fc404b773b1bdc4adc994a17 %}

🔬 So what do we have here?

- **Line 1**: Say hello to our first Rocket attribute — `route`. Using this attribute, we define an HTTP method for our route (i.e `get`, `post`), a path (either static or dynamic), and an optional data parameter (not needed here since we are defining a `GET` route).

- **Lines 3–5**: We use the `NamedFile` struct to try and open the **index.html** file (we will create it next), and if we are successful, return the content of the file (the file extension determines the content type automatically). If we fail, we map the errors to a `NotFound` error type and return it. Notice the use of `await` on line 4. We are asynchronously loading the file so that other operations won't have to wait for the file to load to continue processing.

2.&nbsp;Next, `static_files`, as the name suggests, will handle requests for static files, such as images:

{% gist https://gist.github.com/pxjohnny/831415bf5183e39ad643ebee0f416626 %}

The route looks very similar to the `root` route, with one noticeable difference; unlike the static `root` route, this route is dynamic, meaning it matches anything after the `/` as the `path` variable. We then use this `path` variable and append it to the _site_ folder (line 3) before trying to get the file (using `NamedFile`, just like in the previous route).

3.&nbsp;Next, we mount the new routes to a `Rocket` instance using the `mount` method:

{% gist https://gist.github.com/pxjohnny/a4d873073e2b1356e67e9944b6c303a2 %}

🔬So what do we have here?

We `build` a new `Rocket` instance, then we mount the routes using the `mount` method, which takes two parameters as input:

- A base path to use on all the associated routes (`/` in our case)
- A list of routes via the `routes!` macro.

4.&nbsp;Finally, we need to launch our rocket for it to serve requests. There are two mechanisms to launch a `Rocket` instance, but we will focus on the preferred approach for this tutorial's purposes: the `launch` attribute. Add it above the `rocket` function defined in the previous step:

{% gist https://gist.github.com/pxjohnny/5410f4d22aeaf89eabc104125fecb3b6 %}

5.&nbsp;At the root of our project, create a new folder named **site** and inside of it, create a folder named **static**.

6.&nbsp;Inside the **static** folder, create an **index.html** file with the following content:

{% gist https://gist.github.com/pxjohnny/d8270ae9dc3fe3f16f0255d37d64089d %}

7. Create an empty **styles.css** file in the same folder. We will populate it later on.

Go ahead and `cargo run` the project and then browse to localhost:8000. Congratulations, you have a working Rocket server!

![](https://cdn-images-1.medium.com/max/1024/1*qDR4dgv6G9IUcrm9JdiAWA.jpeg)<figcaption>Look ma! I can serve a page! 👶</figcaption>

With our server up and running, we are ready to take on the next task and pour some Diesel (pun intended) into our Rocket to gain database support!

* * *