Merge pull request #1 from Radiquum/vercel

Add a vercel deployment

.cz.yaml

@@ -4,5 +4,5 @@ commitizen:
   name: cz_conventional_commits
   tag_format: $version
   update_changelog_on_bump: true
-  version: 0.10.0
+  version: 0.11.0
   version_scheme: semver

CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.11.0 (2024-05-15)
+
+### Feat
+
+- **deployment**: allow deploy to vercel
+
+### Fix
+
+- **vercel/backend**: fix vercel backend deploy
+- **vercel/backend**: fix vercel.json headers schema
+- **vercel/backend**: fix missing CORS headers
+- **frontend**: fix API_URL environment variable being undefined
+
 ## 0.10.0 (2024-05-13)
 
 ### Feat

README.md

@@ -2,6 +2,10 @@
 
 AniX is an unofficial web client for the Android application Anixart. It allows you to access and manage your Anixart account from a web browser on your desktop or laptop computer.
 
+[Changelog](./CHANGELOG.md)
+
+[Backend Readme](./backend/README.md)
+
 ## Screenshots
 
 **User profile page**
@@ -89,6 +93,8 @@ To access the docker logs you can use `docker compose -f docker-compose.dev.yml
 
 ## Deployment
 
+### first steps
+
 1. clone this repository via `git clone https://github.com/Radiquum/AniX.git`
 2. cd into the repository folder.
 3. deploy app with below instructions.
@@ -152,6 +158,27 @@ To access the docker logs you can use `docker compose -f docker-compose.dev.yml
 
 You can find more details in the Deta Space documentation: [Deta Space Docs](https://docs.deta.space/)
 
+### Vercel
+
+*note* you don't need to complete the first steps for vercel deploy
+
+1. [Deploy the backend](./backend/README.md#vercel) and copy the production url, including the prefix
+2. create a new project on vercel and set the root directory to frontend
+3. set API_URL env variable to copied url
+4. click deploy
+
+#### Available environment variables
+
+- API_URL - sets the api url to use for frontend to connect to the backend
+
+#### One-Click Deploy
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Radiquum/AniX/tree/main/frontend)
+
+*note*: this will create a new repository.
+
+*note*: don't forget to set API_URL to backend url.
+
 ## Contributing
 
 We welcome contributions to this project! If you have any bug fixes, improvements, or new features, please feel free to create a pull request.

backend/README.md

@@ -0,0 +1,28 @@
+# Anix Backend
+
+This is the backend for AniX, an unofficial WEB client for the Android app Anixart.
+
+It is using FastAPI and server as a proxy between app API and Web Client.
+
+## Deployment
+
+### Environment variables
+
+- API_PREFIX - sets the api prefix
+
+### Docker
+
+  [Refer the docker deployment from root README file](../README.md#docker-deployment)
+
+## Vercel
+
+1. fork the repository
+2. create a new project on vercel and set the root directory to backend
+3. (optionally) set API_PREFIX env variable
+4. click deploy
+
+### One-Click Deploy
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Radiquum/AniX/tree/main/backend)
+
+*note*: this will create a new repository

backend/main.py

@@ -1,5 +1,8 @@
+import os
+
 import uvicorn
 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
 from modules import proxy
 from modules.pages import bookmarks
 from modules.pages import favorites
@@ -38,6 +41,9 @@ TAGS = [
 
 PREFIX = "/v1"
 
+if os.getenv("API_PREFIX"):
+    PREFIX = os.getenv("API_PREFIX")
+
 app = FastAPI(
     openapi_tags=TAGS,
     title="AniX API",
@@ -47,6 +53,14 @@ app = FastAPI(
     redoc_url=None,
 )
 
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["GET", "POST"],
+    allow_headers=["*"],
+)
+
 app.include_router(profile.router, prefix=f"{PREFIX}/profile", tags=["Profile"])
 app.include_router(auth.router, prefix=f"{PREFIX}/auth", tags=["Profile"])
 

backend/vercel.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "builds": [
+    {
+      "src": "main.py",
+      "use": "@vercel/python"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "main.py",
+      "headers": {
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET,POST",
+        "Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
+      }
+    }
+  ]
+}

frontend/README.md

@@ -1,10 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

frontend/app/api/config.js

@@ -1,4 +1,8 @@
-export let API_URL = "/api/v1";
+let API_URL = "/api/v1";
+
+if (process.env.API_URL) {
+  API_URL = process.env.API_URL;
+}
 
 export const endpoints = {
   index: {

frontend/next.config.mjs

@@ -14,6 +14,9 @@ const nextConfig = {
       },
     ],
   },
+  env: {
+    API_URL: process.env.API_URL,
+  },
 };
 
 export default nextConfig;