Docker + FastAPI + Vue

Technologies:

• Docker
• Python FastAPI
• Vue JS

Getting Started

This guide assumes basic understanding of Docker, Python, and Javascript.

Getting the demo application up and running:

1. Create a new repo using this as a template: https://github.com/willfong/docker-fastapi-vue/generate

2. Clone the new repo locally: git clone [email protected]:willfong/test-repo.git

3. Change to the new repo: cd test-repo

4. Create a .env file and add session secret:

   JWT_SIGNING_TOKEN=SOME_SECRET_HERE
   

5. Build the Docker image: docker build --tag dockerfastapivue .

6. Start a container named app from the image created above:

   docker run \
     --rm -d \
     --name app \
     -p 5000:80 \
     -v ${PWD}/data:/data \
     --env-file .env \
     dockerfastapivue
   

7. Check to make sure the app container is still running: docker ps

8. Create the SQLite datafile: docker exec -it app sqlite3 /data/sqlite.db ".read /data/schema.sql"

9. Check the SQLite datafile to ensure there are tables: docker exec -it app sqlite3 /data/sqlite.db .schema

10. Open a web browser to: http://localhost:5000/

11. Click "Login" in the top right corner

12. Click "Test Account Login" and enter in any username.

13. Add a new message and see the message displayed.

Make changes to the backend system:

1. Check the logs from the backend: docker logs app

2. In app/main.py on line 16, add:

   @app.get("/echo/:message")
   def echo(message: str):
     util.logger.warning(f"Message: {message}")
     return {"msg": message}
   

3. Stop the Docker container: docker stop app

4. Rebuild Docker image: docker build --tag dockerfastapivue .

5. Start a new container with the new image:

   docker run \
     --rm -d \
     --name app \
     -p 5000:80 \
     -v ${PWD}/data:/data \
     dockerfastapivue
   

6. Test the new endpoint: curl localhost:5000/echo/hello-world

7. Check the Docker logs for your test message: docker logs app

Make changes to the frontend system:

1. Change to the vue directory: cd vue

2. Install the Javascript dependencies: npm install

3. In src/components/navbar.vue, change: <h1 class="title">Example App</h1> to <h1 class="title">Hello App!</h1>

4. Build the production distribution: npm run build

5. Stop the existing Docker container: docker stop app

6. Start a new container with the new image:

   docker run \
     --rm -d \
     --name app \
     -p 5000:80 \
     -v ${PWD}:/vue \
     -v ${PWD}/data:/data \
     dockerfastapivue
   

7. Open a web browser to: http://localhost:5000 and verify

Docker Commands

Create image locally:

docker build --tag dockerfastapivue .

Run an instance:

docker run \
    --rm -d \
    --name app \
    -p 5000:80 \
    -v ${PWD}/vue:/vue \
    -v ${PWD}/data:/data \
    
    dockerfastapivue

Access the database directly:

docker exec -it app sqlite3 /data/sqlite.db

GitHub Auth Flow

GitHub OAuth is a bit easier to enable than Facebook and Google OAuth.

1. Create a GitHub OAuth Application: https://github.com/settings/applications/new

2. Application Name and Homepage URL are just for display. Set Authorization callback URL to http://localhost:5000/oauth/github

3. Add the following to the .env file:

   GITHUB_CLIENT_ID=626...1d2
   GITHUB_CLIENT_SECRET=cc3...350
   

4. Pass the .env file to Docker when you create the instance:

   docker run \
     --rm -d \
     --name app \
     -p 5000:80 \
     -v ${PWD}/vue:/vue \
     -v ${PWD}/data:/data \
     --env-file .env \
     dockerfastapivue
   

5. You can use the GitHub login button now.

Details about the user profile passed back from GitHub: https://developer.github.com/v3/users/#get-the-authenticated-user