How can I allow for dynamic URLs on a static Nuxt.js application? I have some dynamic routes like this.
/user/_user
/order-confirmation/_key
/some-route/_key/with/additional/_slug
I generate most of the routes on build time, but some IDs will exist after creating the app. I believe I could use .htaccess somehow to allow for this, but so far, I haven't been able to get it working. I have tried with this: nuxtjs cannot display dynamic url on production - but that doesn't seem to work either.
I can't believe there isn't more information on this, must be a pretty regular usecase.
Related
I'm currently building a URL shortener and am using React for its frontend. It is where my domain (let's say example.com) is linked to using Firebase Hosting.
I'm in a bit of a struggle trying to figure out the redirection part of the service, as I want this redirection to be "HTTP native"; it should not require JS to redirect, just a plain 301 redirection.
Shortened URLs look like this: example.com/go/:linkId.
When a user clicks on a shortened link, My server should get the request, find out what URL is linked to the shortened URL's id, and redirect to the original.
Since I don't want to involve JS, I tried to use the redirects setting in firebase.json. At first, it looked promising just to use:
"redirects": [
{
"source": "/go/:linkId",
"destination": "<SERVER_URL>/go/:linkId"
}
]
Two issues with this approach:
It won't work on localhost, as (AFAIK) firebase.json isn't being taken into consideration when running Webpack dev server.
Anyway, there is a different server URL for development and production environments. I don't want to hard-code the URL since it won't let me separate between them.
I was thinking about redirecting to a go.js file or something that will live in the dist folder with index.html, but It won't be resolved a node.js file.
If you have any idea how to solve this, I'd be glad to hear.
Thanks!
Redirects will work locally when you use the Firebase CLI, i.e. by running firebase serve. If you need to preprocess your source to get the final distribution, you do that locally, and then call firebase serve on the output of that preprocessing step.
I have existing app that runs on Heroku. It's a simple web app with no background jobs or database.
Basically it has three endpoints. One of them serves the HTML, the other is POST endpoint for communicating with backend and third is GET endpoint that renders error HTML content as well.
Now the frontend is not single page application and the goal is not to be one. It's just HTML page with a form and some links. The front end can be used without Javascript.
My questions are:
Can I re-use existing ExpressJS code? I was thinking about importing route callbacks and use them inside the "functions".
I know there is Firebase hosting that can serve static content. However, as I mentioned the server can respond with HTML content so I'd need traditional routing (such as /error url for rendering HTML error). In my ExpressJS app I use .ejs templating so I'd like to load the template and render it.
Can Firebase be set up so the "backend" (functions) can be placed on my own domain? I'd like to call relative URLs from my index file (like that POST endpoint) instead of using Google Firebase URL.
I'm really just trying to find out if my use case can fit the Firebase infrastructure. I think it's a good candidate since I need the web app to respond infrequently and it's not really demanding, not many people would use it. This is also my hobby project so I'm trying to minimize costs.
To answer your questions:
Yes you can, but keep in mind some things are limited. In my case, I had tried to use multer library for multipart forms but didn't work and had to resort to using busboy instead. To use an Express app for a function endpoint, you simply just pass your app as the onRequest function parameter like so: functions.https.onRequest(app).
Docs:
https://firebase.google.com/docs/functions/http-events#using_existing_express_apps
The hosting is for static files only. You can't use that with .ejs. Unless, you're thinking to use that as a proxy to your Express app..
Yes, you can set custom domains so you can use your domain(s) instead of default ones. Reference: https://firebase.google.com/docs/hosting/custom-domain
From your project's Hosting page, enter the wizard for connecting a custom domain:
If you have only one Hosting site, click Connect domain.
If you have more than one Hosting site, click View for the desired site, then click Connect domain.
Enter the custom domain name that you'd like to connect to your Hosting site.
(Optional) Check the box to redirect all requests on the custom domain
to a second specified domain (such that yourdomain.com and
www.yourdomain.com redirect to the same content).
Click Continue to initiate the validation process.
I have to bundles, frontend and backend. I want the subdomain "admin.domain.com" to work as "admin.domain.com/whateverpage" and controlled by the backend bundle controllers. All other subdomains should work like "sub1.domain.com/{dynamicwhateverpage}" or "sub2.domain.com/{dynamicwhateverpage}" and be controlled by the frontend bundle controllers.
I got it to work with "admin.domain.com/backend/whateverpage" and "sub1.domain.com/frontend/{dynamicwhateverpage}". The backend and frontend in the URL of course should not be visible to the users. Is there a way to rewrite with htaccess? Or is there even a better way to achieve this kind of rewriting?
Symfony can match routing based on host. This should also work when importing routes, though I have not tested it;
/**
* #Route("/", name="project_page", host="{project}.example.com")
*/
public function projectPageAction($project) {
// ...
}
Just make sure your none dynamic routes are loaded before the all capturing one, or make sure the project one can't match eg. admin.
Earlier Routes Always Win
Why would you ever care about requirements? If a request matches two routes, then the first route always wins.
I am trying to set up a forward proxy to serve web pages in nodejs (using the request package).
I can get the web page to be served up, however my problem is in the assets that the webpage tries to reference, they are (of course), all relative pathing (e.g. images/google.png).
my code is thus:
...
app.get('/subdomain/proxy/:webpage', function(req, resp) {
req.pipe(request('http://' + req.params.webpage)).pipe(resp);
}
...
and the response I get, given proxy.mywebsite.com/www.google.com looks like (google inline-styles its css):
So, the question is:
How do I load in resources that are relatively pathed? Is my approach here regarding a forward proxy even correct?
My only solution is to scrape all relative paths and rewrite the html to be absolute references instead which sounds horrific (and doesn't account for cases where the external .js scripts could also relatively reference stuff).
It must be possible as there are websites like 'hidemyass' which achieve the same thing.
This is all extremely new to me, but it seems like I'm asking for something quite simple and I'm quite surprised I've not been able to find a solution yet.
I'm looking to solve two problems:
Rewriting URLs in production to use a CDN URL instead of the original domain name
Concatenation and minification of client side JS and CSS
There seems to be a few options for for achieving the latter, for example asset-smasher. However I'm finding it hard to find a good solution for rewriting images and other assets. Any libraries out there to help?
Thanks!