Forem: Yashasvi Singh

Supa-Fast API (Supabase FastAPI) : Deploying on DETA

Yashasvi Singh — Wed, 02 Feb 2022 19:22:59 +0000

In this last part of the tutorial of the series,we will be looking at deploying the FastAPI that we build in the last tutorial.

We have our Supa-Fast API working on our local system.. But will we be able to deploy it easily????

To my surprise, DETA has made it relatively easy to deploy the API..

I hit some roadblocks while deploying (OBVIOUSLYYYY) and shared a trick that might work for you like it did for me.

About Deta

As stated on their official website docs,

Deta is a free cloud crafted with the developer and user experience at heart.

What about Pricing??

It's FREE.FOREVER.

Yes, their motto states

We want anyone, at any age from anywhere in the world to experiment and build their ideas without worrying about limits of credit cards.

Prepare your Local Environment

If you have been following the previous tutorials, we have been using virtualenv and have only a limited dependencies in our virtualenv

To get the list of installed dependencies for the project , go to the api directory and run the command

pip freeze > requirements.txt

This will create a requirements.txt file in the api directory.

#requirements.txt

anyio==3.4.0
asgiref==3.4.1
atomicwrites==1.4.0
attrs==21.2.0
certifi==2021.10.8
chardet==4.0.0
charset-normalizer==2.0.8
click==8.0.3
colorama==0.4.4
dataclasses==0.6
deprecation==2.1.0
fastapi==0.70.0
gotrue==0.2.0
h11==0.12.0
httpcore==0.13.7
httptools==0.2.0
httpx==0.19.0
idna==2.10
importlib-metadata==4.8.2
iniconfig==1.1.1
packaging==21.3
pluggy==1.0.0
postgrest-py==0.5.0
py==1.11.0
pydantic==1.8.2
pyparsing==3.0.6
pytest==6.2.5
python-dateutil==2.8.2
python-dotenv==0.19.2
PyYAML==6.0
realtime-py==0.1.3
requests==2.25.1
rfc3986==1.5.0
six==1.16.0
sniffio==1.2.0
starlette==0.16.0
supabase==0.0.3
toml==0.10.2
typing_extensions==4.0.0
urllib3==1.26.7
uvicorn==0.15.0
watchgod==0.7
websockets==9.1
zipp==3.6.0

Make sure you have the .env file with the environment variables as the API won't get deployed in case you missed that step in the last tutorial.

Working with DETA

To start, install the DETA CLI in powershell and login into deta using the following commands..

//The below command for install is for Windows

iwr https://get.deta.dev/cli.ps1 -useb | iex 

deta login

To get the list of available commands, run deta --help

We'll create a new deta micro for the supafast-api after navigating to the api folder from the last tutorial

deta new

// Response on running deta new command

Successfully created a new micro
{
        "name": "api",
        "id": "XXXX_XXXXX_XXXXX_XXXX_XXXX_XXXX",
        "project": "XXXXXXX",
        "runtime": "python3.9",
        "endpoint": "XXXXXXXXXX",
        "region": "XXXXXXXX",
        "visor": "enabled",
        "http_auth": "disabled"
}

The above command will install the dependencies listed in the requirements.txt on our new micro and will be visible on the Deta web interface.

In the previous tutorial, we added a .env file for the local environment, but for this created Deta instance, we don't have any environment variable defined. To solve that, run the following command while in the api directory.

deta update -e .env

And our API is available at https://e5w1sl.deta.dev/docs to check out 🤝🤝.

Your API url can be found on the DETA Dashboard as above.

If you want to open up the endpoint to public, run the command

deta auth disable

//Response from CLI

Successfully disabled http auth

Not Getting Any OUTPUT ?????

If you face an error (like me) on running your API in the browser with a response :

Bad Gateway
The micro ran into an error while processing the request.

If you are the owner of the micro, please check your logs.

If the response took around 10s, it might be due to the time out limit.

Run deta logs and try if you can find any error in the logs..

For example, this is the error I got in my logs

[ERROR] AttributeError: module 'typing' has no attribute '_ClassVar'
Traceback (most recent call last):
  File "/var/lang/lib/python3.9/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1030, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1007, in _find_and_load
  File "<frozen importlib._bootstrap>", line 986, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 680, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 850, in exec_module
  File "<frozen importlib._bootstrap>", line 228, in _call_with_frames_removed
  File "/var/task/_entry.py", line 1, in <module>
    from detalib.handler import handle
  File "/opt/python/detalib/handler.py", line 3, in <module>
    from . import handlers
  File "/opt/python/detalib/handlers.py", line 3, in <module>
    from .adapters.asgi import Asgi
  File "/opt/python/detalib/adapters/asgi/__init__.py", line 1, in <module>
    from .adapter import Asgi  # noqa
  File "/opt/python/detalib/adapters/asgi/adapter.py", line 7, in <module>
    from .lifespan import Lifespan
  File "/opt/python/detalib/adapters/asgi/lifespan.py", line 9, in <module>
    class Lifespan:
  File "/opt/python/dataclasses.py", line 958, in dataclass
    return wrap(_cls)
  File "/opt/python/dataclasses.py", line 950, in wrap
    return _process_class(cls, init, repr, eq, order, unsafe_hash, frozen)
  File "/opt/python/dataclasses.py", line 800, in _process_class
    cls_fields = [_get_field(cls, name, type)
  File "/opt/python/dataclasses.py", line 800, in <listcomp>
    cls_fields = [_get_field(cls, name, type)
  File "/opt/python/dataclasses.py", line 659, in _get_field
    if (_is_classvar(a_type, typing)
  File "/opt/python/dataclasses.py", line 550, in _is_classvar
    return type(a_type) is typing._ClassVar
[2021-11-11T00:32:56+05:30] Unknown application error occurred

For this particular error, the problem is with the dataclasses package in the requirements and we will remove it to get the correct output.

For that, run the following commands

pip uninstall dataclasses

pip freeze >requirements.txt

//run this in powershell
deta deploy

Now on running the Deta Micro with the URL (https://e5w1sl.deta.dev/themes)

// 20211130191258
// https://e5w1sl.deta.dev/themes

{
  "data": [
    {
      "id": 1,
      "created_at": "2021-11-26T15:28:21+00:00",
      "monsterTheme": "demo-theme-1",
      "monsterThemeBg": "https://jtpcokcjjqbizziufohl.supabase.co/storage/v1/object/public/supafast-api/themes/demo-theme-1.png"
    },
    {
      "id": 2,
      "created_at": "2021-11-26T15:29:45+00:00",
      "monsterTheme": "demo-theme-2",
      "monsterThemeBg": "https://jtpcokcjjqbizziufohl.supabase.co/storage/v1/object/public/supafast-api/themes/demo-theme-2.png"
    },
    {
      "id": 3,
      "created_at": "2021-11-26T15:30:04+00:00",
      "monsterTheme": "demo-theme-3",
      "monsterThemeBg": "https://jtpcokcjjqbizziufohl.supabase.co/storage/v1/object/public/supafast-api/themes/demo-theme-3.png"
    },
    {
      "id": 4,
      "created_at": "2021-11-26T15:30:12+00:00",
      "monsterTheme": "demo-theme-4",
      "monsterThemeBg": "https://jtpcokcjjqbizziufohl.supabase.co/storage/v1/object/public/supafast-api/themes/demo-theme-4.png"
    },
    {
      "id": 6,
      "created_at": "2021-11-26T15:30:21+00:00",
      "monsterTheme": "demo-theme-5",
      "monsterThemeBg": "https://jtpcokcjjqbizziufohl.supabase.co/storage/v1/object/public/supafast-api/themes/demo-theme-5.png"
    }
  ],
  "status_code": 200
}

For more interactive output of the API Documentation, use the URL (https://e5w1sl.deta.dev/docs) which is provided by Swagger UI.

And as Francesco says, NOT DEPLOY on FRIDAY!!!

Conclusion

With the API deployed, this series comes to an end🎉🎉✨✨.

In case you have any doubts or suggestions regarding the article(s), feel free to contact me on my email aunicorndeveloper@gmail.com or on Twitter at @aUnicornDev.

The API built in this series is used in the tabsMonster project. Everyone is more than welcome to checkout and contribute in this Open Source Project.

aUnicornDev / tabsMonster

A Chrome extension to keep a tab on your Browser Tabs

Important Links

Below are the links for docs and products if you are more interesed.

https://www.deta.sh/
https://github.com/deta
Deta also has an active community to reach out Deta Slack

Thank you for Reading!!

Supa-Fast API (Supabase FastAPI) : Building the API

Yashasvi Singh — Wed, 12 Jan 2022 16:13:04 +0000

In this is the second part of the series, we will be looking at building the API using FastAPI and Supabase python client.

Prerequisites

Have a database set up on Supabase(can match the database set up in the last tutorial)
Comfortable with Python (including Virtual Environments)
An Idea of what Environment Variables are
JSON format

Setting up FastAPI

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints.

Installing python 3.7.5

To get started , make sure you have python > 3.7 as the latest supabase client uses that.

Download python 3.7.5 from here.

Install it with the Add to path flag checkbox enabled.

To list all the installed python on your system use the below command

> py -0  

Installed Pythons found by C:\Windows\py.exe Launcher for Windows
 -3.7-32 *
 -3.6-32

Creating test FastAPI

Navigate to the folder where you want to create your project and run the following commands

mkdir supafast-api

cd .\supafast-api\

Create and activate a Virtual Environment with the latest installed python using the given commands

virtualenv venv-supaFastApi --python=python3.7

.\venv-supaFastApi\Scripts\activate

Create an api folder in which the main login for the API will reside.. Name the file as main.py

Note: Do not name the file other than main.py as it is required for deployment.

mkdir api

cd .\api

cd. >main.py

pip install fastapi

pip install "uvicorn[standard]"

In the main.py file, add the code below and run the API using uvicorn to test if everything works properly.

#main.py

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
def root():
    return {"message": "Hello World Test"}

uvicorn main:app --reload

http://127.0.0.1:8000/

A response similar to this should appear on the screen at http://127.0.0.1:8000/

// 20211127160738
// http://127.0.0.1:8000/

{
  "message": "Hello World Test"
}

TIP : use JSON Viewer Chrome Extension to view prettified JSON in the browser.

Now that the test FastAPI is working, let's get started and add the Supabase Python client
to get data in the API.

Using Data from Supabase

supabase-community / supabase-py

Python Client for Supabase

pip install supabase

We need to use the SUPABASE_URL as well as SUPABASE_KEY which will be present in the settings of the Supabase project that we created in the first part of this series.

#main.py

from fastapi import FastAPI
from supabase import create_client, Client
app = FastAPI()


url = YOUR_SUPABASE_URL
key = YOUR_SUPABASE_KEY

supabase: Client = create_client(url, key)

Getting Data from Database

This was the structure of the database in the Supabase and for the API ,we are going to add two endpoints in FastAPI...

To list down all the themes - /themes
To list down the monsters of a particular theme - /monsters/?theme={theme_name}

#main.py

from fastapi import FastAPI
from supabase import create_client, Client
app = FastAPI()

url = YOUR_SUPABASE_URL
key = YOUR_SUPABASE_KEY

@app.get("/themes")
def themes():
    themes = supabase.table('themes').select('*').execute()
    return themes

@app.get("/monsters/")
def monsters(theme : str = "demo-theme-1"):
    monsters = supabase.table('monsters').select('*').eq('monsterTheme',theme).execute()
    return monsters

For the URL http://127.0.0.1:8000/themes , the result would be

// 20211127163945
// http://127.0.0.1:8000/themes

{
  "data": [
    {
      "id": 1,
      "created_at": "2021-11-26T15:28:21+00:00",
      "monsterTheme": "demo-theme-1"
    },
    {
      "id": 2,
      "created_at": "2021-11-26T15:29:45+00:00",
      "monsterTheme": "demo-theme-2"
    },
    {
      "id": 3,
      "created_at": "2021-11-26T15:30:04+00:00",
      "monsterTheme": "demo-theme-3"
    },
    {
      "id": 4,
      "created_at": "2021-11-26T15:30:12+00:00",
      "monsterTheme": "demo-theme-4"
    },
    {
      "id": 6,
      "created_at": "2021-11-26T15:30:21+00:00",
      "monsterTheme": "demo-theme-5"
    }
  ],
  "status_code": 200
}

For the "monsters" endpoint, we need a query parameter, but in case we don't send a query parameter, we will have a default value set so that a response is available at the endpoint.

In the main.py above , we have a default set to demo-theme-1.. So in case the API call is to the endpoint http://127.0.0.1:8000/monsters/ we will get the result as follows

// 20211129131036
// http://127.0.0.1:8000/monsters/

{
  "data": [
    {
      "id": 1,
      "created_at": "2021-11-27T02:47:11+00:00",
      "monsterName": "demo-monster-1",
      "monsterQuote": "demo-quote-1",
      "monsterTheme": "demo-theme-1",
      "monsterLevel": 5
    },
    {
      "id": 2,
      "created_at": "2021-11-27T02:49:03+00:00",
      "monsterName": "demo-monster-2",
      "monsterQuote": "demo-quote-2",
      "monsterTheme": "demo-theme-1",
      "monsterLevel": 10
    },
    {
      "id": 4,
      "created_at": "2021-11-27T02:50:21+00:00",
      "monsterName": "demo-monster-3",
      "monsterQuote": "demo-quote-3",
      "monsterTheme": "demo-theme-1",
      "monsterLevel": 20
    }
  ],
  "status_code": 200
}

Getting Images from Storage

The Supabase Python Client also provides various methods to interact with the Supabase Storage and we are going to get the public URL for the stored images.

For that we need to have the exact location of the file in the Bucket as well as the correct name for the images.

From the last blog of the series, we had the above structure of files in the Bucket supafast-api

#main.py

from fastapi import FastAPI
from supabase import create_client, Client
app = FastAPI()

url = YOUR_SUPABASE_URL
key = YOUR_SUPABASE_KEY

supabase: Client = create_client(url, key)

@app.get("/themes")
def themes():
    themes = supabase.table('themes').select('*').execute()

    for theme in themes['data']:
#theme['monsterThemeBg'] = supabase.storage().StorageFileAPI(BUCKET_NAME).get_public_url(FILE_LOCATION)
        theme['monsterThemeBg'] = supabase.storage().StorageFileAPI('supafast-api').get_public_url('themes/'+ theme['monsterTheme'].replace(' ','-') + '.png')

    return themes

Here, the FILE_LOCATION is easier to construct because the way these files are stored. The response we receive after adding the monsterThemeBg is like

// 20211129184109
// http://127.0.0.1:8000/themes

{
  "data": [
    {
      "id": 1,
      "created_at": "2021-11-26T15:28:21+00:00",
      "monsterTheme": "demo-theme-1",
      "monsterThemeBg": "https://jtpcokcjjqbizziufohl.supabase.co/storage/v1/object/public/supafast-api/themes/demo-theme-1.png"
    },
    {
      "id": 2,
      "created_at": "2021-11-26T15:29:45+00:00",
      "monsterTheme": "demo-theme-2",
      "monsterThemeBg": "https://jtpcokcjjqbizziufohl.supabase.co/storage/v1/object/public/supafast-api/themes/demo-theme-2.png"
    },

    ...


  ],
  "status_code": 200
}

The final main.py file will look something like this..

#main.py

from fastapi import FastAPI
from supabase import create_client, Client
app = FastAPI()

url = YOUR_SUPABASE_URL
key = YOUR_SUPABASE_KEY
supabase: Client = create_client(url, key)


@app.get("/themes")
def themes():
    themes = supabase.table('themes').select('*').execute()
    print(themes['data'])
    for theme in themes['data']:
        theme['monsterThemeBg'] = supabase.storage().StorageFileAPI('supafast-api').get_public_url('themes/'+ theme['monsterTheme'] + '.png')

    return themes

@app.get("/monsters/")
def monsters(theme : str = "demo-theme-1"):
    monsters = supabase.table('monsters').select('*').eq('monsterTheme',theme).execute()
    for monster in monsters['data']:
        monster['monsterBg'] = supabase.storage().StorageFileAPI('supafast-api').get_public_url(monster['monsterTheme']+'/'+ monster['monsterName'].replace(' ','-') + '.png')

    return monsters

Setting Up Environment Variables

As you can see in the main.py , SENSITIVE properties like the url and key are directly defined in the file. Such sensitive data should never be in a file and to overcome it, we use environment variables.

I found this really good article on dev.to to use environment variables from a .env file.

To do that,

//Stop the uvicorn server

cd. >.env

Now in the newly created .env file, add your variables in the format

#.env

SUPABASE_SUPAFAST_URL=your-supabase-url
SUPABASE_SUPAFAST_KEY=you-supabase-key

#make sure you don't have spaces before/after the equal sign

In main.py file,

import os
from fastapi import FastAPI
from supabase import create_client, Client
from dotenv import load_dotenv

load_dotenv()
app = FastAPI()

url = os.getenv('SUPABASE_SUPAFAST_URL')
key = os.getenv('SUPABASE_SUPAFAST_KEY')
supabase: Client = create_client(url, key)

'''
Rest of the code for the routes of the API
'''

Here, we additionally import the os and the load_dotenv packages, run the load_dotenv() function which loads the KEY=VALUE pairs into the environment so that os.getenv('KEY') can retrieve the value from the environment.

We didn't need to install a package for load_dotenv because the python-dotenv gets automatically installed when running pip install "uvicorn[standard] "

In case you use git(or some other VCS), make sure to put the .env in the .gitignore file, so that it is not visible to the general public.

Next Steps

Now that we have our API fully working on our local environment, in the next tutorial will deploy it on DETA and make it available publicly.

In case you have any doubts or suggestions regarding the article, feel free to contact me on my email aunicorndeveloper@gmail.com or on Twitter at @aUnicornDev.

The API built in this series is used in the tabsMonster project. Everyone is more than welcome to checkout and contribute in this Open Source Project.

aUnicornDev / tabsMonster

A Chrome extension to keep a tab on your Browser Tabs

Important Links

Below are the links for docs and products if you are more interesed.

Python 3.7.5
tiangolo / fastapi

FastAPI framework, high performance, easy to learn, fast to code, ready for production
JSON Viewer Chrome Extension

Thank you for reading this far

Supa-Fast API(Supabase FastAPI): Setting up Database and Storage

Yashasvi Singh — Fri, 07 Jan 2022 18:58:42 +0000

This tutorial is the First of a Three part series on Building a FastAPI with Supabase as the backend and Deploying it on deta.sh

Supabase is an Open Source Firebase Alternative

In this tutorial, we will be setting up Supabase from scratch and there are going to be a ton of screenshots for reference ahead, so brace yourselves!!!

Getting Started with Supabase

Jump on to Supabase ,click on Start your project and login with GitHub

Start a New Project and an empty database will be available for you to start adding tables.

We will be using the Database and Storage functionality for this API as highlighted above and we'll start by adding a couple of tables in the Database.

Setting Up Database

For reference ahead, we will be making the following relationship between our tables.

This mockup is made in drawsql.

themes Table

Start by creating a new table...

Here, in table named themes, we have enabled the is Unique flag in the monsterTheme as we have to use the monsterTheme as a FOREIGN KEY in the monsters table as shown in the mockup above.

After inserting a few rows of Dummy/Demo data in the table themes like we did above, we can see a similar table in the Database.

monsters Table

A FOREIGN KEY can be added on the database by clicking on the link button which will open up the choices for the table and it's underlying columns.

We have the themes as the desired table and monsterTheme as the column which will act a FOREIGN KEY in the table monsters .

Similar to themes, we will insert some Dummy data into the monsters table.

With the Databases set up with some initial dummy data, we can finally move on to the Supabase Storage.

Setting up Storage

Supabase Storage has 3 important keywords

Files : Any sort of media file
Folder : A way to organize the files in a more meaningful manner
Bucket : A Super Folder under which all related folders should be kept

We'll be creating a new Bucket named supafast-api for storing the theme background as well as the monster images .

We'll also be adding a number of Folders to structure these image so that we can retrieve them in the API easily.

Under Storage in the left menu bar, Create a new public Bucket name supafast-api.

Create a folder named themes and a folder for every theme name.

The themes folder contains images for the theme background whereas the theme names contain images for the underlying monsters.

And we are done with setting up the Database as well as the Storage for the database.

In the upcoming blogs of this series, we will look at building and deploying an API with FastAPI using the Supabase Client for Python.

Below are the links for docs and products if you are more interesed.

Supabase Docs
Supabase also has an amazing discord community to learn and have fun.
drawSql

The API built in this series is used in the tabsMonster project. Everyone is more than welcome to checkout and contribute in this Open Source Project.

Forem: Yashasvi Singh

Supa-Fast API (Supabase FastAPI) : Deploying on DETA

About Deta

What about Pricing??

Prepare your Local Environment

Working with DETA

Not Getting Any OUTPUT ?????

Conclusion

aUnicornDev / tabsMonster

A Chrome extension to keep a tab on your Browser Tabs

Important Links

Thank you for Reading!!

Supa-Fast API (Supabase FastAPI) : Building the API

Prerequisites

Setting up FastAPI

Installing python 3.7.5

Creating test FastAPI

Using Data from Supabase

supabase-community / supabase-py

Python Client for Supabase

Getting Data from Database

Getting Images from Storage

Setting Up Environment Variables

Next Steps

aUnicornDev / tabsMonster

A Chrome extension to keep a tab on your Browser Tabs

Important Links

tiangolo / fastapi

FastAPI framework, high performance, easy to learn, fast to code, ready for production

Thank you for reading this far

Supa-Fast API(Supabase FastAPI): Setting up Database and Storage

Getting Started with Supabase

Setting Up Database

themes Table

monsters Table

Setting up Storage

aUnicornDev / tabsMonster

A Chrome extension to keep a tab on your Browser Tabs

Thank you for reading this far