Using Zeit Now Serverless and Node Js, is there an out of the box way to route incoming request via path and http method?
For instance, I want requests to GET api/cookies to go to getCookie() and requests to POST api/cookies to go to createCookie().
With the "rewrites" configuration this feature will be launched. For now, you can use:
"routes": [
{"src": "/api/get", "dest": "api/get.js", "methods": ["GET"] },
{"src": "/api/post", "dest": "api/post.js", "methods": ["POST"] },
]
Related
I am struggling to understand how firebase.json redirect rules work.
Here I define the hosting to my website, which works perfectly pointing to dist/project-name directory.
"hosting": [
{
"target": "project-name",
"public": "dist/project-name",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
...
...
However, things start to get confusing when I try to implement redirect rules. Let's say I want requests to non-existing files and directories be redirected to my hosting public target. I would assume that this is the proper way to define it:
"rewrites": [
{
"source": "**",
"destination": "dist/project-name"
}
]
But making requests to random endpoints like localhost:5000/abcdef, localhost:5000/testing are not being redirected so the request fails. What should the source be then?
Now, let's say that instead of redirecting to my public target directory, I want to redirect to a firebase function with Express.
"rewrites": [
{
"source": "**",
"destination": "app"
}
]
Well, that does not work either in the emulator localhost:5000. Even though I can see functions work (Express app) in the emulator localhost:5001
I am thinking because the /functions directory is not part of the dist folder. But then why redirecting to dist/project-name does not work either? Any ideas? Thank you!
Alright, I had to try a few things and read the documentation to understand what I was doing.
Docs:
https://firebase.google.com/docs/hosting/functions#use_a_web_framework
https://firebase.google.com/docs/hosting/full-config#rewrites
First, I was thinking that by doing "destination": "dist/project-name" in the rewrites, the url was always going to redirect to the hosting site. So no matter what path I go to (i.e. /abc) it was going to show me the index.html file. Well, that is not the case. The rewrite is not even happening and I could see that in the logs http://localhost:4002/logs. I think that is because of the priority order.
Second, my Express.js app is deployed as a function in firebase. Rewrites to Cloud Functions should be "function": "app" not "destination": "app".
Last but not least, my Cloud Function with Express.js was deployed to us-east1 like this exports.app = functions.region("us-central1").https.onRequest(app);. However, here we can see that Firebase Hosting only accepts us-central1 for Cloud Functions at the moment.
I'm using Getx for navigation which internally uses Navigator 2.0. I'm unable to load a specific URL when I Host in Firebase Hosting.
It seems to be working fine locally.
I'm using Url Path Strategy to remove the #
Check if you correctly rewrite all requests to /index.html
https://firebase.google.com/docs/hosting/full-config
firebase.json:
{
"hosting": {
"public": "www",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
...
Deploy again afterwards.
this is the now.json
{
"version": 2,
"name": "nestjs-now",
"builds": [
{
"src": "dist/main.js",
"use": "#now/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "dist/main.js"
}
]
}
I'm not sure what's the reason and how to fix.
I just followed the vercel tutorial to deploy my nestjs backend project, but don't works.
It inclues GraphQL APIs and Rest APIs together as well as socket.io server.
Why it doesn't work?
Serverless Functions on Vercel (at the moment) do not accept a build step for the code of the function. For that reason, any backend framework that needs a "build step" to generate a server, will not work.
What Vercel is best for?
Frontend deployments and Serverless Functions as helpers. Full-blown APIs should be deployed elsewhere. You can check the following resources:
https://vercel.com/guides
https://vercel.com/import
https://vercel.com/docs/runtimes#official-runtimes
What are my options?
I recommend that you use Heroku or Digital Ocean as alternatives.
Update 2021-11-11
Now you can deploy any framework with SSR, API routes, and Edge Functions (soon) to Vercel. Just make sure you are following the File System API specification.
You can read the introduction section for more information. Remember that Vercel is a platform optimized for frontend deployments.
the problem is that VERCEL looks for the DIST folder as soon as it starts the BUILD process
What you can do is remove the DIST folder from the .gitignore this way it will resolve the 404
after that, whenever you make a new deploy it is necessary to force deploy without cache to compile your dist againe
In your production dashboard you will find this buttom with
vercel function logs
and inside you can find what is breaking your app
but, in my opinion, the first mistake that are crashing is about your VERCEL.JSON file:
When you are building a serveless app in nestjs, you will not renderize by dist/ or output/, you gotta render from your src/, so your vercel.json must be like this:
{
"version": 2,
"builds": [
{
"src": "src/main.ts",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "src/main.ts",
"methods": ["GET", "POST", "PUT", "PATCH", "DELETE"]
}
]
}
And you must do set it with the documentation help
calling your API like it needs.
This following resolution doesn't works with NESTJS/SWAGGER because it is not sending SwaggerUIBundle to browser as in this image, but a solution to the same issue can be founded here with only swagger in C# (and if is your case, you can try to adapt it to nestjs/swagger)
I oppened this to find some solution
I have successfully deploy nestjs to vercel and I used the following starter project: https://github.com/nestjs/javascript-starter
1)- first, you need to install #babel/cli and #babel/core both at the same time, otherwise npx will install out-of-dated babel 6.x. which will cause issues later when building the project using babel, and thats according to babel own docs
2)- remove #babel/core from package.json
3)- remove #babel/cli if exists from package.json
4)- remove package-lock.json
5)- remove node_modules
6)- run the command npm i
7)- run the command npm i --save-dev #babel/core #babel/cli
8)- build/transpile the project using the command npx babel src --out-dir build
9)- add vercel.json to your project like with following
{
"version": 2,
"builds": [
{
"src": "build/main.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "build/main.js",
"methods": [ "GET", "POST", "PUT", "PATCH", "DELETE" ]
}
]
}
10)- now push this to github, then deploy to vercel
I have created an express app which is working pretty fine but when I'm trying to host the web app using firebase cloud functions the url rewrites rules in firebase.json seems to be not working properly.
code snippet from index.js file under functions folder
exports.app = functions.https.onRequest(app);
here is the snippet from firebase.json file
"rewrites": [
{
"source": "/**{,/**}",
"function": "app"
}
I have also tried
"rewrites": [
{
"source": "**",
"function": "app"
}
but none of the is working.
I want all my webapp's url request from "http://url/someroute" to get routed to "http://url.com/app/someroute"
Right now for now all of this to work I have to change my hyperlinks from "/someroute" to "/app/someroute"
"rewrites": [
{
"source": "**",
"function": "app"
}
this works perfectly fine..Just check if you have also selected firebase hosting along with functions or do firebase init hosting and then firebase init functions seperately and then delete index.html from the public directory.
The problem is that you trying to redirect to a function, not a route, so if you want to actually change the route, you have to use destination instead of function, as follows:
"rewrites": [
{
"source": "**",
"destination": "/app/**"
}
Or something similar to that, here is a community post that explain that in a little more detail and also the rewrite documentation that might be able to help you further
When I run firebase deploy:
Camerons-MacBook-Pro-2:showboost cameronedwards$ firebase deploy
⚠ "firebase" key in firebase.json is deprecated. Run firebase use --add instead
⚠ hosting: We found a hosting key inside firebase.json as well as hosting configuration keys that are not nested inside the hosting key.
Please run firebase tools:migrate to fix this issue.
Please note that this will overwrite any configuration keys nested inside the hosting key with configuration keys at the root level of firebase.json.
Error: Hosting key and legacy hosting keys are both present in firebase.json.
When I run firebase use --add as suggested:
Camerons-MacBook-Pro-2:showboost cameronedwards$ firebase use --add
⚠ "firebase" key in firebase.json is deprecated. Run firebase use --add instead
? Which project do you want to add? showboost-e366b
? What alias do you want to use for this project? (e.g. staging) showboost
Created alias showboost for showboost-e366b.
Now using alias showboost (showboost-e366b)
When I run firebase tools:migrate as suggested:
Camerons-MacBook-Pro-2:showboost cameronedwards$ firebase tools:migrate
⚠ "firebase" key in firebase.json is deprecated. Run firebase use --add instead
This command is deprecated and will be removed.
i Checking feature configuration...
i Checking "firebase" key...
Error: Server Error. certificate has expired
Finally, here's a look at my firebase.json file:
{
"firebase": "showboost-e366b",
"public": "showboost",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/public/**",
"destination": "/public.html"
},
{
"source": "**",
"destination": "/index.html"
}
],
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I've been trying to fix this for a while so any help would be amazing, thank you!
Edit - Ive been looking into it more and it looks like "firebase tools:migrate" is Depreciated. Is there a new command I need to use?
Had the same issue but in your case you have 2 instances of rewrites array available, of which shouldn't be an issue.
Replace you last array of
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
to
"rewrites": [
{
"source": "**",
"function": "app"
}
]