Sfnprojecttemplate

A Project Template for Svelte Frontend, Falcon Backend, and Nginx Proxy. Utilizes Docker and Docker Compose.

Svelte, Falcon, mySQL Project Template

This is a template for my projects using Svelte, Falcon, mySQL. This Template utlizes Docker and Docker Compose to host the servers.

This template includes a simple frontend using the JavaScript framework Svelte that connects to a backend API written in python using the Falcon library. The application also consists of a MySQL database and a phpMyAdmin server to allow developers to visualize their data. An Nginx reverse proxy is set up to allow access to the frontend and the API layers. All the servers are run in docker, with docker-compose bringing up all the servers.

This project also includes code for performing unit tests in python using the Pytest library. Lastly, the project contains tools for creating python documentation using Sphinx.

Each folder has a ReadMe.md file that goes into more depth on using the tools available and how to use those tools to develop your applications.

Technologies Used

Frontend - Svelte CSS - TailwindsCSS Backend - Faclon Database - mySQL Database Visualization - phpMyAdmin Reverse Proxy -Nginx Running the Application - Docker Testing - Pytest Documentation - Shpinx

Prerequisites

Docker
1. I recommend installing Docker Desktop
Docker Compose
Git
Python 3.11.1 suggested

Setup

Ensure that Docker is running - If you are using Docker Desktop you can open the appliction to start the Docker Service
From your command line run git clone https://github.com/CollinConnors/ProjectTemplate.git
cd ProjectTemplate
docker compose -f "dockercompose.yaml" up -d --build - If you are using the VSCode Docker Extension you can right click the dockercompose.yaml and select "Docker Compose Up"

Accessing the Frontend

In your browser go to http://localhost:80
If the fronend server is running you will see a default page.
Then navigate to http://localhost:80/tests to verify the frontend is connected to the backend
If the backend is running you will see {alive: true}

Accessing the Backend

In your browser go to http://localhost:80/api/v1/
If the API server is running you will get a responce {alive: true}

Development

Each folder contains in-depth information on how to begin development. I recommend using VS Code as your editor. I found the following VS Code Extensions helpful:

Top categories