testdrivenio / fastapi-vue

Single Page App with FastAPI and Vue.js

Developing a Single Page App with FastAPI and Vue.js

Want to learn how to build this?

Check out the post.

Want to use this project?

Build the images and spin up the containers:

$ docker-compose up -d --build

Apply the migrations:

$ docker-compose exec backend aerich upgrade

Ensure http://localhost:5000, http://localhost:5000/docs, and http://localhost:8080 work as expected.

fastapi-vue's Issues

cant see notes

I followed the tutorial and reviewed it: https://testdriven.io/blog/developing-a-single-page-app-with-fastapi-and-vuejs/
found some typo in the router in index.js. its missing in the guide.

  {
    path: '/editnote/:id',
    name: 'EditNote',
    component: EditNote,
    meta: {requiresAuth: true},
    props: true,
  }

but it still doesnt fix for me, still cant see notes.
but if I clone the repo and start it, I can see the notes.

one thing to make git clone work is editing the services/frontend/Dockerfile:
FROM node:16-alpine
maybe it help someone

Addition of MSAL library support

Has anyone found a way to get this application to support the MSAL authentication library or any like library? I'm curious on what type of effort this would be to integrate it to use external auth. Any tips or pointers are greatly appreciated. This repo has is great so far. Thanks for the effort on it.

Question - losing auth on refresh?

Howdy - first, thank you for the excellent tutorial. Has been a great launching off point to get me used to Vue/FastAPI (as a recovering manager/executive who hasn't coded up something wholly new in quite a while :) ).

I hope you don't mind a possibly silly question - if it's annoying, feel free to delete this issue.

I'm running into an issue which I've been trying to debug, but haven't been able to figure out - which is that whenever the page is refreshed, the app loses the user (and requires log in again).

I can't decide if this is expected behavior (I know it's sending an authentication cookie over) - and I realize that it may be, as I can't find any place that the app is interacting with local storage to maintain the user. So I figured I would ask. :)

Mostly just trying to figure if I missed something somewhere, or if it's just something I need to add.

Thanks again!

Vue3 support

Anybody interested in having this awesome project support Vue3? I can create a PR for that.

And many thanks @mjhea0 for writing the great tutorial for this project 👏🏻

tortoise/__init__.py AttributeError

uvicorn main:app --reload
...
INFO: Started server process
INFO: Waiting for application startup.
ERROR: Traceback (most recent call last):
...
password = info.get("credentials", {}).get("password")
AttributeError: 'NoneType' object has no attribute 'get'

Vue Error after login

I've created a user from Swagger Docs, then after login on front I get this error:

ERROR Cannot read properties of null (reading 'length') TypeError: Cannot read properties of null (reading 'length') at Proxy.render (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/DashboardView.vue?vue&type=template&id=cabbb9e2:66:296) at renderComponentRoot (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:940:38) at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5320:46) at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:217:19) at instance.update (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5433:16) at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5443:5) at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5237:7) at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5203:9) at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4878:11) at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5402:9)

Maybe the API call to get the notes is done after it is evaluated by Vue?

Notes class in Database models refers to an invalid attribute

https://github.com/testdrivenio/fastapi-vue/blob/master/services/backend/src/database/models.py#L22

Currently: return f"{self.title}, {self.author_id} on {self.created_at}"

However, the attribute author_id does not exist.

Perhaps it should be this instead?

return f"{self.title}, {self.author}, {self.id} on {self.created_at}"

Backend not running unless rerunning docker-compose

Hi, many thanks for the hard work and the post associated! It helped me a lot learn about those frameworks :)

However, from a complete fresh start (aka, the first time I build the whole app), it seems I need to run the docker-compose up -d --build twice to get the uvicorn server up. If I only run the docker-compose command once only the frontend is responding to localhost. But when I run the docker-compose a second time, I can get the backend on the port 5000.

I find this weird, considering I tried to connect to the backend container after the first docker-compose command and check if uvicorn was running with the top command in the detached terminal, and I indeed found a uvicorn process running, but the server was not responding on port 5000 until I rerun the docker-compose command.

Any idea why? Is it an issue from my side? Don't know why would it be but still asking..

Thanks!

When run with Docker on osx Ventura 13.1 I get this error

fastapi-vue % docker-compose up -d --build

[+] Building 1.6s (12/12) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 313B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/python 1.4s
=> [1/7] FROM docker.io/library/python:3.11-buster@sha25 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 217B 0.0s
=> CACHED [2/7] RUN mkdir app 0.0s
=> CACHED [3/7] WORKDIR /app 0.0s
=> CACHED [4/7] COPY requirements.txt . 0.0s
=> CACHED [5/7] RUN pip install --upgrade pip 0.0s
=> CACHED [6/7] RUN pip install -r requirements.txt 0.0s
=> [7/7] COPY src/ . 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:07031a2595515a706b60eaf32ccc3 0.0s
=> => naming to docker.io/library/fastapi-vue-backend 0.0s
[+] Running 0/1
⠿ Container fastapi-vue-backend-1 Starting 0.9s
Error response from daemon: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: exec:

exception: relation "users" does not exist

I just cloned and docker-compose up the project. The "Hello world!" works, but when I want to register or login, I get this output on FastAPI machine:

  File "/app/./src/routes/users.py", line 27, in create_user
    return await crud.create_user(user)
  File "/app/./src/crud/users.py", line 17, in create_user
    user_obj = await Users.create(**user.dict(exclude_unset=False))
  File "/usr/local/lib/python3.9/site-packages/tortoise/models.py", line 1105, in create
    await instance.save(using_db=db, force_create=True)
  File "/usr/local/lib/python3.9/site-packages/tortoise/models.py", line 926, in save
    await executor.execute_insert(self)
  File "/usr/local/lib/python3.9/site-packages/tortoise/backends/base/executor.py", line 203, in execute_insert
    insert_result = await self.db.execute_insert(self.insert_query, values)
  File "/usr/local/lib/python3.9/site-packages/tortoise/backends/asyncpg/client.py", line 38, in translate_exceptions_
    raise OperationalError(exc)
tortoise.exceptions.OperationalError: relation "users" does not exist

[eslint] Error

Hey all,

It's not a major issue, but just to make you aware.

After setting up the project, we see the following ESLINT error :

Otherwise everything else are working fine!

• I saw there is an Access Token with a lifetime of 30minutes. Are you thinking to add a Refresh Token later ?
• Any reasons for staying with Vuex 4.1 instead of Pinia (Vuex 5) ?

Great work on that project, and thanks a lot for your guide on testdriven.io!

Tortoise fails to connect to database

@mjhea0 Tried to fix this by refering to multiple resources. Can you please look into it?

1. Cloned the repo,
2. Build the images and spin up the containers, using:
   $ docker-compose up -d --build
3. Applying migrations it failed to connect with database with below traceback:
   $ docker-compose exec backend aerich upgrade

Traceback (most recent call last):
  File "/usr/local/bin/aerich", line 8, in <module>
    sys.exit(main())
  File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 321, in main
    cli()
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1128, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1053, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1656, in invoke
    super().invoke(ctx)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1395, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python3.9/site-packages/click/core.py", line 754, in invoke
    return __callback(*args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/click/decorators.py", line 26, in new_func
    return f(get_current_context(), *args, **kwargs)
  File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 45, in wrapper
    loop.run_until_complete(f(*args, **kwargs))
  File "/usr/local/lib/python3.9/asyncio/base_events.py", line 642, in run_until_complete
    return future.result()
  File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 95, in cli
    await Migrate.init(tortoise_config, app, location)
  File "/usr/local/lib/python3.9/site-packages/aerich/migrate.py", line 66, in init
    await Tortoise.init(config=config)
  File "/usr/local/lib/python3.9/site-packages/tortoise/__init__.py", line 600, in init
    await cls._init_connections(connections_config, _create_db)
  File "/usr/local/lib/python3.9/site-packages/tortoise/__init__.py", line 392, in _init_connections
    await connection.create_connection(with_db=True)
  File "/usr/local/lib/python3.9/site-packages/tortoise/backends/asyncpg/client.py", line 106, in create_connection
    raise DBConnectionError(f"Can't establish connection to database {self.database}")
tortoise.exceptions.DBConnectionError: Can't establish connection to database hello_fastapi_dev

Detailed traceback:

Traceback (most recent call last): File "/usr/local/lib/python3.9/site-packages/tortoise/backends/asyncpg/client.py", line 103, in create_connection self._pool = await asyncpg.create_pool(None, password=self.password, **self._template) File "/usr/local/lib/python3.9/site-packages/asyncpg/pool.py", line 407, in _async__init__ await self._initialize() File "/usr/local/lib/python3.9/site-packages/asyncpg/pool.py", line 435, in _initialize await first_ch.connect() File "/usr/local/lib/python3.9/site-packages/asyncpg/pool.py", line 127, in connect self._con = await self._pool._get_new_connection() File "/usr/local/lib/python3.9/site-packages/asyncpg/pool.py", line 477, in _get_new_connection con = await connection.connect( File "/usr/local/lib/python3.9/site-packages/asyncpg/connection.py", line 1981, in connect return await connect_utils._connect( File "/usr/local/lib/python3.9/site-packages/asyncpg/connect_utils.py", line 732, in _connect con = await _connect_addr( File "/usr/local/lib/python3.9/site-packages/asyncpg/connect_utils.py", line 632, in _connect_addr return await __connect_addr(params, timeout, True, *args) File "/usr/local/lib/python3.9/site-packages/asyncpg/connect_utils.py", line 682, in __connect_addr await compat.wait_for(connected, timeout=timeout) File "/usr/local/lib/python3.9/site-packages/asyncpg/compat.py", line 103, in wait_for return await asyncio.wait_for(fut, timeout) File "/usr/local/lib/python3.9/asyncio/tasks.py", line 479, in wait_for return fut.result() asyncpg.exceptions.InvalidCatalogNameError: database "hello_fastapi_dev" does not exist

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
File "/usr/local/bin/aerich", line 8, in
sys.exit(main())
File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 321, in main
cli()
File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1128, in call
return self.main(*args, **kwargs)
File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1053, in main
rv = self.invoke(ctx)
File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1656, in invoke
super().invoke(ctx)
File "/usr/local/lib/python3.9/site-packages/click/core.py", line 1395, in invoke
return ctx.invoke(self.callback, **ctx.params)
File "/usr/local/lib/python3.9/site-packages/click/core.py", line 754, in invoke
return __callback(*args, **kwargs)
File "/usr/local/lib/python3.9/site-packages/click/decorators.py", line 26, in new_func
return f(get_current_context(), *args, **kwargs)
File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 45, in wrapper
loop.run_until_complete(f(*args, **kwargs))
File "/usr/local/lib/python3.9/asyncio/base_events.py", line 642, in run_until_complete
return future.result()
File "/usr/local/lib/python3.9/site-packages/aerich/cli.py", line 95, in cli
await Migrate.init(tortoise_config, app, location)
File "/usr/local/lib/python3.9/site-packages/aerich/migrate.py", line 66, in init
await Tortoise.init(config=config)
File "/usr/local/lib/python3.9/site-packages/tortoise/init.py", line 600, in init
await cls._init_connections(connections_config, _create_db)
File "/usr/local/lib/python3.9/site-packages/tortoise/init.py", line 392, in _init_connections
await connection.create_connection(with_db=True)
File "/usr/local/lib/python3.9/site-packages/tortoise/backends/asyncpg/client.py", line 106, in create_connection
raise DBConnectionError(f"Can't establish connection to database {self.database}")
tortoise.exceptions.DBConnectionError: Can't establish connection to database hello_fastapi_dev

Wrong description with Flask

On the GitHub page, under "About" it says: "Single Page App with Flask and Vue.js". But it should be "Single Page App with FastAPI and Vue.js".

no actions register on vuex

I try this repo and find issue that trying the register on frontend site as the vuex mention no action register , is there any correction or help about this?