Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does this method work with the pages router? #2

Open
remusris opened this issue Jun 4, 2023 · 11 comments
Open

Does this method work with the pages router? #2

remusris opened this issue Jun 4, 2023 · 11 comments

Comments

@remusris
Copy link

remusris commented Jun 4, 2023

Can you copy the code from next.config.ts in an existing pages router nextJS project to get this method to work?

@digitros
Copy link
Owner

digitros commented Jun 4, 2023

@remusris Absolutely. Just make sure you change the path to the python file in the package.json script.
Something like this, if you're not using "src":
"fastapi-dev": "pip3 install -r requirements.txt && python3 -m uvicorn pages.api.index:app --reload",

@remusris
Copy link
Author

remusris commented Jun 4, 2023

My second question is can this be used alongside trpc? I'm referring to a t3 stack scaffold

below is the t3 stack folder structure

├─ public
│ └─ favicon.ico
├─ prisma
│ └─ schema.prisma
├─ src
│ ├─ env.mjs
│ ├─ pages
│ │ ├─ _app.tsx
│ │ ├─ api
│ │ │ ├─ auth
│ │ │ │ └─ [...nextauth].ts
│ │ │ └─ trpc
│ │ │ └─ [trpc].ts
│ │ └─ index.tsx
│ ├─ server
│ │ ├─ auth.ts
│ │ ├─ db.ts
│ │ └─ api
│ │ ├─ routers
│ │ │ └─ example.ts
│ │ ├─ trpc.ts
│ │ └─ root.ts
│ ├─ styles
│ │ └─ globals.css
│ └─ utils
│ └─ api.ts
├─ .env
├─ .env.example
├─ .eslintrc.cjs
├─ .gitignore
├─ next-env.d.ts
├─ next.config.mjs
├─ package.json
├─ postcss.config.cjs
├─ prettier.config.cjs
├─ README.md
├─ tailwind.config.ts
└─ tsconfig.json

Would you just change the code below

const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/api/:path*",
        destination:
          process.env.NODE_ENV === "development"
            ? "http://127.0.0.1:8000/api/:path*"
            : "/api/",
      },
    ];
  },
};

module.exports = nextConfig;```





To something like the code below? 



```/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/api/folder/:path*",
        destination:
          process.env.NODE_ENV === "development"
            ? "http://127.0.0.1:8000/api/:path*"
            : "/api/folder",
      },
    ];
  },
};

module.exports = nextConfig;```


@IdoPesok
Copy link

IdoPesok commented Sep 1, 2023

@digitros will it work with tRPC ? ^

I got it to work correctly on my localhost but for some reason Vercel isn't recognizing the Python file in src/pages/api/[dir name]

@Wolfleader101
Copy link

Just following up on if anyone got this working

@Wolfleader101
Copy link

@digitros will it work with tRPC ? ^

I got it to work correctly on my localhost but for some reason Vercel isn't recognizing the Python file in src/pages/api/[dir name]

I've been update to replicate on localhost, it does not rewrite for me

@JohnVersus
Copy link

It should work with the app folder too, but you can't add the file inside app folder. Create a newapi folder in the root and add your python function API folder along with index.py.

reference: https://vercel.com/docs/functions/serverless-functions/runtimes
image

@Wolfleader101
Copy link

Wolfleader101 commented Sep 16, 2023

It should work with the app folder too, but you can't add the file inside app folder. Create a newapi folder in the root and add your python function API folder along with index.py.

reference: https://vercel.com/docs/functions/serverless-functions/runtimes image

I haven't gotten it to work with the pages directory.

I have
image
image

  rewrites: async () => {
    return [
      {
        source: "/api/py/:path*",
        destination:
          process.env.NODE_ENV === "development"
            ? "http://127.0.0.1:8000/api/py/:path*"
            : "/api/py",
      },
    ];
  },

image

it seems to be deploying to /api/index

from fastapi import FastAPI, Request, APIRouter

router = APIRouter(prefix="/api/py")


@router.get("/")
def hello_world(request: Request):
    return {"message": "Hello World"}

app = FastAPI()
app.router.include_router(router)

which means this code never gets run

@JohnVersus
Copy link

@Wolfleader101 It works the same way in pages too.

Since you mentioned /api/py route as prefix in code, vercel will not use it for the path. Vercel only uses the file name or folder name for the API path

As per your current setup your python code should run in api/index/api/py

@Wolfleader101
Copy link

api

It seems to be that it works but only on a per file basis - you can't have a fully setup fast API router, you need to have one per file...
Any solution to get past this?

@JohnVersus
Copy link

api

It seems to be that it works but only on a per file basis - you can't have a fully setup fast API router, you need to have one per file... Any solution to get past this?

Yeah, I think that's a limitation when you are using Python runtime with the next js framework.

To fully utilize the Python runtime like one single Python backend app you need to remove the next js files and host it with just vercel config.

@Wolfleader101
Copy link

api

It seems to be that it works but only on a per file basis - you can't have a fully setup fast API router, you need to have one per file... Any solution to get past this?

Yeah, I think that's a limitation when you are using Python runtime with the next js framework.

To fully utilize the Python runtime like one single Python backend app you need to remove the next js files and host it with just vercel config.

Yea seems to be a limitation with multiple project types. Hopefully they fix it in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants