My React/NextJS front end has a Button component that fetches data via a serverless function when the button is clicked. I want to test this functionality during local development with the Vercel dev/CLI tools, as manetioned here
I’m receiving a 404 response
Note: I can access the lambda function from localhost:3000/pages/api/validate.py (vercel dev server address). This appears to manually kickstart the lambda function build and serve process. I thought that it should have been built and served already from the vercel.json specification and be available at localhost:3001/api/validate. This seems to agree with the
Note 2: Next dev/CLI tools build and serve javascript/typescript files just fine. I’m using python and Go functions as well, which are supported by Vercel dev/CLI but not Next.
You must be registered to see links
I am getting a 404 result when attempting to access my lambda functions. Here are the approximate steps that I’ve gone through so far:- Create package.json with a dev script:
Code:... "scripts": { "dev": "yarn codegen && next --hostname=0.0.0.0 --port=3001", } ...
- Link to deployed vercel project
- Create vercel.json to specify builds and routes:
Code:... [COLOR=var(--hljs-string)]"builds"[/COLOR]: [ { [COLOR=var(--hljs-string)]"src"[/COLOR]: [COLOR=var(--hljs-string)]"*.html"[/COLOR], [COLOR=var(--hljs-string)]"use"[/COLOR]: [COLOR=var(--hljs-string)]"@now/static"[/COLOR] }, { [COLOR=var(--hljs-string)]"src"[/COLOR]: [COLOR=var(--hljs-string)]"pages/api/*.py"[/COLOR], [COLOR=var(--hljs-string)]"use"[/COLOR]: [COLOR=var(--hljs-string)]"@now/python"[/COLOR] }, ], [COLOR=var(--hljs-string)]"routes"[/COLOR]: [ { [COLOR=var(--hljs-string)]"src"[/COLOR]: [COLOR=var(--hljs-string)]"/api/validate"[/COLOR], [COLOR=var(--hljs-string)]"dest"[/COLOR]: [COLOR=var(--hljs-string)]"/pages/api/validate.py"[/COLOR] } ] ...
- Create my test Lambda function (in python):
Code:[COLOR=var(--primary-very-high)][B]from[/B][/COLOR] http.server [COLOR=var(--primary-very-high)][B]import[/B][/COLOR] BaseHTTPRequestHandler [COLOR=var(--primary-very-high)][B]from[/B][/COLOR] datetime [COLOR=var(--primary-very-high)][B]import[/B][/COLOR] datetime [COLOR=var(--primary-very-high)][B]class[/B][/COLOR] [COLOR=var(--hljs-literal)][B]handler[/B][/COLOR](BaseHTTPRequestHandler): [COLOR=var(--primary-very-high)][B]def[/B][/COLOR] [COLOR=var(--hljs-string)][B]do_GET[/B][/COLOR](self): self.send_response([COLOR=var(--hljs-number)]200[/COLOR]) self.send_header([COLOR=var(--hljs-string)]'Content-type'[/COLOR], [COLOR=var(--hljs-string)]'text/plain'[/COLOR]) self.end_headers() self.wfile.write([COLOR=var(--tertiary-high)]str[/COLOR](datetime.now().strftime([COLOR=var(--hljs-string)]'%Y-%m-%d %H:%M:%S'[/COLOR])).encode()) [COLOR=var(--primary-very-high)][B]return[/B][/COLOR]
- Create my Button component:
Code:... <Button variant=[COLOR=var(--hljs-string)]"contained"[/COLOR] color=[COLOR=var(--hljs-string)]"secondary"[/COLOR] onClick={() => { fetch([COLOR=var(--hljs-string)]'api/validate'[/COLOR]) .then(response => { [COLOR=var(--tertiary-high)]console[/COLOR].log(response) response.json() }) .then(data => [COLOR=var(--tertiary-high)]console[/COLOR].log(data)) }} > Generate sample dataset </Button> ...
- Run vercel dev
- Access website at localhost:3001 (next dev server address)
- Click button
I’m receiving a 404 response
Note: I can access the lambda function from localhost:3000/pages/api/validate.py (vercel dev server address). This appears to manually kickstart the lambda function build and serve process. I thought that it should have been built and served already from the vercel.json specification and be available at localhost:3001/api/validate. This seems to agree with the
You must be registered to see links
.Note 2: Next dev/CLI tools build and serve javascript/typescript files just fine. I’m using python and Go functions as well, which are supported by Vercel dev/CLI but not Next.