FastAPI started as a sample project for a simple web application with a database (PostgreSQL), service (Loopback.io 4) and front end (Nuxt 3). A meter data management system is now being developed here.
The app has the following directory structure:
app: This directory contains the Nuxt.js application code.app.vue: The main entry point for the application.Dockerfile: A Docker file used to build a container image for the application.pages: Directory containing page-level components.layouts: Directory containing reusable layout components.stores: Directory containing Pinia store configurations.nuxt.config.ts: The main configuration file for Nuxt.js.server: Directory containing server-side code for the application.assets: Directory containing static assets such as CSS files and images.components: Directory containing reusable UI components.
service: This directory contains the backend API code using LoopBack 4.src: Directory containing source code for the service.__tests__: Directory containing unit tests for the service.repositories: Directory containing database repository implementations.controllers: Directory containing API controllers.models: Directory containing data models used by the service.
Dockerfile: A Docker file used to build a container image for the service.
docs: This directory contains documentation files for the application.
This project can be run entirely within Docker. To start the local environment, simply use the following command:
Attention: If you are on Linux you should run echo "UID=$UID" > .env within the project root beforehand. This will ensure docker compose runs the containers with the correct UID for an optimal local DX.
docker-compose --profile all up -d(Note: This is a simple instruction on how to start the local development environment using Docker Compose. The --profile all option tells Docker Compose to use all defined profiles, and up -d starts the containers in detached mode.)
The provided docker-compose.yml file sets up a PostgreSQL database, a PGAdmin server for managing the database, and two separate services: the LoopBack 4 backend, and a Nuxt.js application. To login to the database, follow these steps:
Step 1: Access the PGAdmin Web Interface
- Open a web browser and navigate to
http://localhost:5000. This is the default URL for the PGAdmin server. - Log in with the credentials provided:
- Email: root@db.com
- Password: root
Step 2: Connect to the Database
Once logged in, you'll be presented with a list of available servers. Click on the "Connect" button next to the "postgres" server.
Step 3: Provide Login Credentials
Enter the login credentials for the database:
- Username: root
- Password: root
Step 4: Access the Database
After logging in, you'll be taken to the PostgreSQL database console. You can now execute SQL queries, view database schema, and perform other administrative tasks.
By following these steps, you should be able to successfully login to the PostgreSQL database using the provided Docker Compose configuration.
Test Data
Upon starting the local environment with Docker, you'll notice that some initial data is automatically inserted into the database. This is thanks to the ./docker/db/sql directory, which contains SQL scripts that are executed by the PostgreSQL container when it starts up. These scripts populate the database with some basic data, such as tables and sample records, which can be used for testing and development purposes. This feature saves you the time and effort of manually inserting initial data into the database, allowing you to hit the ground running.
