I am using vue + netlify for a small web app that uses netlify functions I built. Everything works fine in production (when I commit to master and netlify auto-deploys based on my master branch) but when I try to use netlify dev to spin up a local development instance, calls to the netlify function are failing:
VM23:1 POST http://localhost:18002/.netlify/functions/customfunction 404 (Not Found)
Clearly the endpoint in the dev enironment is not the same, but how do I know what that endpoint may be? In the console when running the netlify dev command it says that the lambda server is listening on 3467... but trying to use endpoint http://localhost:34567/.netlify/functions/customfunction results in a CORS error. Any help here would be appreciated!
you might be getting the CORS error because your server is not running on the same host with your vue app and to fix this you have to set a proxy and for that you need to create a vue.config.js file on the project directory (not the vue folder) then past the following code:
module.exports = {
devServer: {
proxy: 'http://localhost:34567' // the port your server in running on
}
}
now your proxy is set so your request URL will the following :
/.netlify/functions/customfunction
Doc reference : https://cli.vuejs.org/config/#devserver-proxy
Related
I can't find a way to figure out where is the host name configuration provided for the SPA application to connect to.
The command passed into the application from ASP.NET Core server while running the SPA is
ng serve --port 44472 --ssl --ssl-cert %APPDATA%\ASP.NET\https\%npm_package_name%.pem --ssl-key %APPDATA%\ASP.NET\https\%npm_package_name%.key
And I could not find any of the above strings localhost:7219, or 5219, or 7219 in the ClientApp / ClientApp/src folder (7219 and 5219 are the server ports and 44472 is the client npm port).
Do the server URLs passed from launchSettings.json asp project directly?
If so, if there a way to configure the server URLs directly from ClientApp if the client application is run from a different host, other than localhost (any where the settings (are | should be) stored)?
I can see the #Injected service everywhere but where does it store the settings is unclear (for how to configure this injected BASE_URL?):
constructor(http: HttpClient, #Inject('BASE_URL') baseUrl: string) {
http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe((result : any) => {
this.forecasts = result;
}, (error : any) => console.error(error));
}
The derived question is: should by default the client Bearer authorization also work for a remote host?
The remote host for example is github pages. How to properly set the remote host configuration within client application for a particular webpack deployment with angular-cli-ghpages if the CORS hosts are configured within Program.cs? Should the client configuration for a remote host (apart from localhost) or server CORS configuration, include additional "Bearer-Cors" configuration (as for the certificate npm start script mentioned in the question above – should it be just skipped without any parameters passed in it)?
Are there any comprehensive guidelines on this subject?
Half of the answer to this question is that the template uses proxy config, which is described here https://angular.io/guide/build#proxying-to-a-backend-server and stores the configuration in proxy.conf.js within ClientApp folder. I will try to extend my answer with any found information in the future.
Update: The second part of the answer is to add the Cookie.SameSite = SameSiteMode.None; cookie authorization configuration in Startup.cs / Program.cs. Take a look at the solution: https://stackoverflow.com/a/75239406/6897369
Short:
How can I set a different port for axios request in nuxt.config, but with same origin domain?
Long:
On my production side I have an express server that delivers my frontend and backend over the same port (e.g. http://192.168.2.22:8800). Axios will make API requests on that same origin with same port. Works very well.
On my dev side I have an express server that delivers only my APIs and I also have the nuxt server, serving the frontend. Both running on different ports (e.g. http://192.168.2.22:8800 for my backend and http://192.168.2.22:3000 for my nuxt). So that I can also execute the API calls in my development environment, I set the baseURL in my nuxt.config to http://localhost:8800.
My problem here is, I can only test my dev environment if I'm on localhost. If I want to access via another pc, the api calls are also started on localhost, which is not reachable.
Is there a way to add a dynamic port to the baseURL?
My nuxt.config right now:
axios: {
baseURL: isDev ? 'http://localhost:8800/api/v1' : '/api/v1'
},
For a better overview.
This is what I want on my production (only express is running):
Frontend: http://192.168.2.22:8800
Backend: http://192.168.2.22:8800
This is what I want on my dev side (two servers are running - express and nuxt):
Frontend: http://192.168.2.22:3000
Backend: http://192.168.2.22:8800
Environment variable are still your best bet here indeed. It will help you configure each environment to your liking and will avoid a lot of mistakes too.
Here is an interesting article on the subject too: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config
I'm building an app with vue.js and this app needs to run later on a terminal without internet connection and without a running server. I want that my client just have to start the index.html file. Is this possible and what setup do i need?
When i start the index.html my only error message in console i get is:
Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///xxx/dist/ec0098eb6371c2f4342a.worker.js' cannot be accessed from origin 'null'.
my register-service-worker.js looks like this to allow localhost
if (
process.env.NODE_ENV === 'production' &&
('https:' === location.protocol || location.host.match(/(localhost|127.0.0.1)/)) &&
navigator.serviceWorker
) {
navigator.serviceWorker.register('/service-worker.js');
}
i try now for days to find a solution. I already build half of my app and now i see that
it can't run locally. I hope someone knows a trick.
Thanks from Germany
A service worker needs https or localhost to work. It will not work in file:// etc. (https://developers.google.com/web/fundamentals/primers/service-workers)
For a one click start you could start such a server from a batch file, but you would have to assume your client has Node or python installed, then npx http-server or the like would work.
Lastly, if your App is completely offline and without a server, you might not need a service worker in the first place.
I'm trying to configure Webpack Hot Module Replacement to work with a remote server.
I'm building an application on Salesforce.com platform and want to configure internal application page to get all necessary files from my local machine using ngrok and webpack-dev-server. And the actual result is the same behavior of HMR - replace changed modules using socketio. I use angular-webpack2-starter seed project to test it just from ngrok. But when I open the page from ngrok endpoint and update some module the connection with HMR is lost.
Logs screenshot here
I have a project set up based around the Polymer Starter Kit, which includes Web-Component-Tester
This project includes php server code which I would also like to test by writing tests to run in the browser which will utilise the PHP server code through Ajax Calls.
This implies replacing the server that Web Component Tester is using ONLY when testing server side code. I hope to make a separate gulp task for this.
Unfortunately, I don't understand the relationship between WCT, Selenium and what ever server is run currently. I can see that WCT command starts Selenium, but I can't find out what the web server is and how that is started. I suspect it is WCT, because there is configuration of the mapping of directories to urls, but other than that I haven't a clue, despite trying to read the code.
Can someone explain how I go about making it run its own server when testing the client, but relying on an already set up web server (nginx) when running the server. I can set nginx to run from local host, or an other domain if that is a way to choose a different configuration.
EDIT: I have now found that runner/webserver.js starts an express server, and that urls get mapped so the base directory for the test runner and the bower_components directory both get mapped to the /components url.
What is currently confusing me is in what circumstances this gets run. It appears that loading plugins somehow does it, but my understanding from reading the code for this is tenuous.
The answer is that web component tester itself has a comment in the runner/config.js file.
In wct-conf.js, you can use registerHooks key into the Object that gets returned to add a function that does
registerHooks: function(wct) {
wct.hook('prepare:webserver', function(app, done) {
var proxy = require('express-http-proxy');
app.use('/api',
proxy('pas.dev', {
forwardPath: function(req, res) {
return require('url').parse(req.url).path;
}
})
);
done();
});
This register hook function allows you to provide a route (/api in my case) which this proxies to a server which can run the php scripts.