I am using React app that wraps DotNetify around Cordova to build iOS and Android app.
Dotnetify connects to a WebSocket Server at given URL, we need to define based on build web or Cordova what is the host URL to connect to the Socket/SignalR server, current line is:
dotnetify.react.connect('Login', this);
the definition of Login is actually relative and I need to pre-pend the host URL somehow to tell build where is the WebSocket to connect to.
My assumption is it should be defined somewhere in Package.json to make it look like below:
dotnetify.react.connect('WSS://DEV.DOMAIN.COM/'+'Login', this);
What's the best solution to address this issue for development/debug mode locally or development on a server with public static IP or production server.
I have found base_url that needs to be passed in info object: node_modules/socksjs-client/lib/main.js:183
// allow server to override url used for the actual transport
this._transUrl = info.base_url ? info.base_url : this.url;
So based on above I tried to pass argument, but donetify is not passing this argument to the socksjs. how do we fix this actually?
this.vm = dotnetify.react.connect('Login', this, {"base_url":"wss://dev.domain.com"});
You can use below to set below in your index.js to set the host right before connecting line.
dotnetify.hubServerUrl = 'domain.example.com';
Related
I would like my backend to serve up my front end (which is written in react). I added the following cade to program.cs:
var frontEndBuildDirectory = "Path to front end build directory";
app.UseFileServer(new FileServerOptions()
{
FileProvider = new PhysicalFileProvider(frontEndBuildDirectory ),
RequestPath = ""
});
My understanding is that this code does two things:
If a request's url starts with the host name of my backend (localhost:xyzw), everything following the host name will be a virtual path into frontEndBuildDirectory.
When a request is made into frontEndBuildDirectory (the directory itself, not a file within the directory), then the response is the index.html file within frontEndBuildDirectory.
The problem is that my react code uses the react-router library. If I make a request to the backend (localhost:xyzw), the front end is served. Then when I click on something that changes the route (using react router), the url changes to localhost:xyzw/route1 and the everything works. However, if I try to search up localhost:xyzw/route1, I get a page not found error.
My understanding is that this happens because there is no file named route1 in frontEndBuildDirectory.
What is the proper way to make requests like localhost:xyzw/route1 not give a page not found error?
I am building a web application from the ASP.Net Core React template, whose "ClientApp" React portion appears to be a 'create-react-app' project. When I deploy the app to IIS, it gets hosted in a subfolder from the root, i.e. http://myserver.com/SubApp. Because of this, I have changed the "homepage" value in package.json to http://myserver.com/SubApp.
What I am now experiencing is that when I am making fetch calls in my javascript code locally, if I use fetch('/myendpoint'), the the url requested locally is https://localhost:44315/myendpoint (which works), but when deployed, this url becomes http://myserver.com/myendpoint, which does not work.
Conversely, when I make the endpont fetch('myendpoint') (no leading slash), the server requests the correct URL http://myserver.com/SubApp/myendpoint but localhost fetches the incorrect URL, https://localhost:44315/SubApp/myendpoint.
I understand that the leading slash makes the request from the root, but the root appears to be different in localhost vs. on the server.
For local debugging purposes, I tried setting a proxy in package.json to https://localhost:44315 so that hopefully fetch('myendpoint') (no leading slash) would work in my local environment, but when I try this, chrome prompts me to sign in repeatedly without ever successfully making the request.
I feel like I am almost there, but I must be missing something. How can I configure my package.json (or other project configuration) to make the fetch commands succeed on both localhost and my server, without doing something hacky like checking the URL in the javascript code before every fetch?
What you need is Proxying API Requests in Development.
It easily allows you to call any endpoint in development and forward it to your backend or other location without CORS issues or your problem of mismatched endpoints.
You will have to use the manual configuration option, since the default proxy setup only helps with host/port forwarding.
Install http-proxy-middleware as a dev dependency:
$ npm -i http-proxy-middleware --save-dev
Following the guide linked above, you can use this configuration:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/SubApp/*',
createProxyMiddleware({
target: 'localhost://44315', // or anything else, point to your dev backend
pathRewrite: {
'^/SubApp': '/', // remove base path
},
})
);
};
You can then fetch with the /SubApp part in the request which will be removed in developement. You can use other configurations to achieve this, this is one example.
I had this same experience as well and found that setting the homepage value in the package.json is a dead end. What you want to do is make use of the PUBLIC_URL environment variable to set a full absolute url in your .env . There may be a way to use relative urls, but there were some edge cases that just made it cleaner to use an absolute URL.
When you set this environment variable you want to make use of it in the following places:
Your Routes (if you use react router)
The path should be prefixed by process.env.PUBLIC_URL
Your internal links should also be prefixed by the env var.
I'm deploying my Create React App to a specific path in a larger non-React webapp. For example, I will say the webapp path is www.example.com and the React app is deployed at www.example.com/react/
I have done this by setting the "homepage" property in package.json of the React app to "homepage": "/react", which does properly serve the static files from the /react/ path on my server.
However, when I make API calls from my react app, they go to /react/api/etc instead of /api/etc.
I can configure axios to use a hardcoded base path of www.example.com, but I deploy this to multiple environments with different URLs and need a solution that doesn't rely on a hardcoded value.
I could also write a workaround on the server side, but it would be less clean / mess with my logging and request statistics.
I would love a clean solution if one exists.
what if you used the window.location property in your axios config object:
{
baseURL: `${location.hostname}/api/` // or window.location.hostname
}
We are using windows 8.1 for one angular application. Installed the bower and npm, also installed node server.
We can see the login page after npm start but after login success we are not able to redirect. It showing error
Cannot GET /components/home.html
After inspect element Console error like this:
angular.js:11038 GET http://localhost:8081/components/home.html 404 (Not Found)
Header:
Request URL:http://localhost:8081/components/home.html
Request Method:GET
Status Code:404 Not Found
Remote Address:[::1]:8081
Referrer Policy:no-referrer-when-downgrade
Response:
Cannot GET /components/home.html
But it is working on linux machine perfectly. We are using .Net web api so we want to use one machine for both application.
Any help is appreciated. Thanks!
If you have tested on Linux and it works, I would say it is a configuration in paths the server that it is serving the assets. If you are using Express or Webpack to serve you React code, they have good support for Windows, so probably is a local configuration issue.
Try checking for any static paths, e.g. ./foo/bar and replacing them with a more Windows-friendly syntax, for example:
const path = require("path")
path.join("foo", "bar")
I am trying to follow the tutorial on creating a MEAN app on scotch.io.
I am using the WebStorm IDE and after completely following through I am stuck with a problem that seems to emerge from WebStorm. If I click on the "Open in Chrome"-Button in the IDE I am referred to:
localhost:63342/scotch_mean_tutorial/views/index.html
However, the actual port that I specified in my server.js is 8080 file:
// listen (start app with node server.js) ======================
app.listen(8080);
console.log("App listening on port 8080");
I have built a node API and it works when I go to:
http://localhost:8080/api/todos
However, clicking on the "Open in Chrome" through my WebStorm IDE uses a different port (i.e. 63342) and thus I am left with the following error:
GET http://localhost:63342/api/todos 404 (Not Found)
I am not sure how to resolve this? Any ideas?
You need to create a javascript debug run configuration with the correct URL (http://localhost:8080/api/todos) and use this configuration to open your URL in browser. Another option: specify this URL in Live Edit/Browser tab of node.js run configuration you use to run your server.js and tick 'after launch' checkbox to automatically start the browser with this URL on server start.
In Webstorm 9, you can configure the port for debugging apps. In Preferences:
Build, Execution, Deployment > Debugger > Built-in Server Port