I can't find a way how to change the backend URL with https://github.com/MKergall/osmbonuspack.
I am using https://github.com/Project-OSRM/osrm-backend for my backend.
Is it even possible?
Related
I have a nextjs/react front end and a gql/express backend.
I've given users the ability to upload an avatar via graphql which then gets saved into a folder on the server ./uploads/avatars/${userId}.jpg
I want to be able to call this image from nextjs with something like https://***.com/uploads/avatars/${userId}.jpg
However nextjs will look for a page/folder called uploads and return a 404. How do I get around this ?
Thanks!
I wonder if there is any way to have static config file in built vue (or nuxt) app, which can be changed and changes are reflected after refresh.
E.g.: I have vue app which is connecting to API endpoint on port 1234. There is another API endpoint but on port 5555. Base url in code would be set to "http://myserver.com:1234/api/". Now I want to use another API endpoint on port 5555. How to achieve this in simple way (if possible).
Update:
I want to slightly correct question. I want to have vue FE app deployed, but one day I want to change base url for api to whatever unknown url. I want something like web.config in asp.net app.
I'm trying to create a nuxtJS module to make some changes to the routes based on the URL or request, i simply want to access the request.header.host inside a nuxtJS module but I'm unable to get it, i tried to check it process.server, this, context but unable to get the request object, i just want to get the full domain only, so how can I do that?
You can only get the hostname in the Browser JavaScript not internally in running nuxt app. As for nuxt app, it is running locally on the server (for example http://localhost:8080).
The information regarding hostname is present in services like Nginx/Apache.
Solution (One of them):
Use #nuxt/dotenv and store hostname in the environment variables:
hostname=example.com
then use wherever you want in your nuxt application with process.env.hostname
didn't manage to find much on this, but I am using anchors on my website, hence I will get a URL as such
localhost:3000/#about.
I am wondering if it's possible to route a URL as such localhost:3000/about to the hashed URL localhost:3000/#about without having a physical about-page.
Essentially, when I directly access the absolute link, I am routed to the hashed/anchored page.
Using Angular-CLI as a frontend. 4200 port
Using Express as a backend. 8080 port
Directories look like:
Application
- backend
- ...Express architecture
- frontend
-...Angular2 architecture
So I'm running two projects, two commanders, one for frontent, second one for backend. node app.js for backend (8080), ng serve for frontent (4200).
Let's assume that I have a layer in backend which returns some string.
app.get('/hello', function(req, res) {
res.send("Hello!");
}
How can I make a request from frontend to backend and get that string? I don't want to know how exactly should I use Angular2 because that's not the point. I'm asking, what technology should I use to be able connect these two (frontent and backend) sides on different ports. If I just run them and make a request from frontend, I'll get an error because it can't find /hello url.
Your request to /hello means an absolute path inside the application running the angular application, so the request goes to http://localhost:4200/hello. Your angular application just doesn't know about the express application you want to target.
absolute urls
If you want to access the hello route on the other (express) application, you need to explicitly specify this by referencing http://localhost:8080/hello.
cors
Doing it this way, the correct application is targeted, but you will likely run into CORS issues, because the browser will prevent the javascript code obtained from localhost:4200 to access a server at localhost:8080. This is a security feature of your browser. So if you want to allow the code at 4200 to access the backend at 8080 your backend can whitelist this so called origin. For details see http://enable-cors.org/ and a corresponding express middleware you could use to support cors in your backend (https://www.npmjs.com/package/cors).
Using this approach has two downsides in my opinion. First, you need a way to tell your frontend under which absolute url it can reach the backend. This must be configurable because you need different urls for dev, staging and production. You then also need a way to manage all your whitelisted urls because the frontend in production will have a different url than when running the frontend in development. This can get pretty cumbersome to handle.
proxying your backend
A better approach in my opinion is to handle this in your infrastructure by proxying the backend in your frontend application. With proxying you basically tell your frontend server that all requests to some url should be passed through to another application. In your case this could probably mean, that for example you configure a proxy for the path /api/ to proxy the application on localhost:8080. The server then doesn't try to find a url like /api/hello on your frontend application but forwards your request to localhost:8080/hello. In your angular application you then don't need to care about the url of your backend and you can then always do a request to a url like /api/some-express-route.
For this to work you need to configure your angular dev server to proxy the requests. For details on how to do this, please see the docs at https://angular.io/guide/build#proxying-to-a-backend-server. When going to production, you can do this by configuring your web server, e.g. nginx to proxy the requests.