Vue Actix Template

Simple template for a Vue frontend and actix backend

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Docker setup
3. Points of Interest
4. License

About The Project

This repo is a simple project using Vue as the front end and actix as the backend. Meant to be a template or hold examples for your actix projects with a JS frontend. Also JS is used here you can also use this with a rust SPA framework Heavy inspiration from cookiecutter-rust-actix-clean-architecture. This is a "batteries included" template for a lot of things, but falls short in a few places. Especially in the area of Docker hosting with a SSL. So some things may not work as excepted. Feel free to reach out or submit and PRS to improve this template.

Features:

• Example on how actix can host a SPA and resolve to the front end router of the selected framework.
• Uses diesel-async for postgres async queries in diesel.
• A somewhat OOP approach to actix, with trying to not have too much boilerplate.
• Docker compose for self hosting.
  • Includes ngix for reverse proxying and hosting ssl.
  • Includes postgres for database.
  • Includes actix for backend.
  • Includes certbot for renewing and creating a ssl.

(back to top)

Built With

• actix
• diesel
• diesel-async
• Vue
• tailwindcss

(back to top)

Getting Started

This is instructions on getting the actix application running, more details on the front end can be found here

Running the application

1. Make a copy of .env.save and name it .env, and set your variables.
   • Note SESSION_KEY needs to be a 64 bit key.
2. If you are using docker for the database can run docker-compose up -d db to start just the database for development.
3. Will need to run the diesel migrations to setup the database.

diesel migration run

4. If you are not using the included frontend can skip this part.
   1. Install the front end dependencies

      cd vue-project
      npm install

   2. To run the front end

      npm run build:dev

5. To run the application

cargo run

6. Can check to make sure it's running at http://localhost:8080/api/hello

Docker setup

Below is some lose documentation on setting up the project with docker

With SSL

1. If you are wanting to use SSL will need to make sure of the following

   • DOMAIN is set in the .env file to the domain you are using.
   • EMAIL is set in the .env file to a real email you use.
   • SSL is set to True in the .env file to make sure secure cookies are used
   • Will need the domain pointing to the server running the containers as well as port 80 and 443 open. This is the URL lets encrypt will use to verify the domain.

2. Set the contents of default.conf.template to the following. This is to get your initial cert.

       server {
         listen 80 default_server;
         server_name _;
         
         location ~ /.well-known/acme-challenge/ {
               root /var/www/certbot;
          }
       }

3. Run docker-compose up to start the containers and cert bot will attempt to get a cert for your domain.

4. The certbot container should have gotten the cert. Now need to set the contents of default.conf.template to the following.

   # always redirect to https
    server {
        listen 80 default_server;
        server_name _;
        return 301 https://$host$request_uri;
    }
   
    server {
        listen 443 ssl http2;
        ssl_certificate     /etc/letsencrypt/live/${DOMAIN}/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/${DOMAIN}/privkey.pem;
        server_name ${DOMAIN};
        root /var/www/html;
        index index.php index.html index.htm;
   
        location / {
            proxy_pass http://actix-web:8080/;
        }
   
        location ~ /.well-known/acme-challenge/ {
            root /var/www/certbot;
        }
    }
   

5. Run docker-compose up again to restart the containers with the new config and should have it running fully with the SSL!

Without SSL

1. Set the contents of default.conf.template to the following.

    server {
        listen 80 default_server;
   
        server_name _;
        location / {
            proxy_pass http://actix-web:8080/;
        }
    }

2. I would also comment out the certbot service in the docker-compose.yml file.
3. Run docker-compose up to start the containers.
4. Should be running at http://localhost
5. Profit!

(back to top)

Points of Interest

• In main.rs:61 can see how the SPA is hosted. Also on line 62 is how I handle allowing the front end router to take over. Anything that would be 404 is sent to the index.html
• get_user_id.rs is an example of using actix session store in a middleware to set a user id to save todos.
• postgres.rs is an example of using diesel async to set up a connection pool. It is then consumed in todo.rs

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)