I'm having a problem getting the correct value for an environment variable I have set. I am working on a localhost with valet. This specific domain is configure for ssl (valet secure), and the URL I am on also shows the certificate and correct URL.
I have the following in my .env file:
APP_URL=https://pad.eppo
MIX_APP_URL=${APP_URL}
I then call on this in my Vue component:
console.log("Environment URL: " + process.env.MIX_APP_URL);
Expected result:
https://pad.eppo
Result:
http://pad.eppo
There is no cache or cookies involved. Both have been cleared to double check. I have recompiled using npm run watch, since this is necessary when changing the variables. I am out of ideas as to why this problem exists. It is a big problem since my axios requests give errors on this.
Any help is much appreciated.
Force HTTPS in your Laravel application:
URL::forceScheme('https');
Add this line at the begin of your web.php file. In that way ${APP_URL} will be returned with HTTPS protocol.
Also ensure your config is not cached - run:
php artisan config:clear
I am new to reactjs, I am working on a app. It was running fine, but when I've run npm run build command, I am getting error "You need to enable JavaScript to run this app.". I have made changes in server.js file even I've given "homepage": "./", but it did not solved my issue.
And I've checked by running laravel project, javascript is enabled in browser, also tried different browsers.
Someone please help me to overcome this error.
I received this message when no proxy to the server was specified inside client package.json file.
"proxy": "http://localhost:5000"
(where 5000 should be changed to whatever port number the server was setup to listen to. In my case it also required server restart once added)
I had same problem. My workable solution:
package.json:
"homepage": "."
index.js:
app.use(express.static(__dirname)); //here is important thing - no static directory, because all static :)
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "index.html"));
});
I received this error because an API call that I was making was being blocked because of an invalid API key.
Try to run in other browser and see if it is working.
If it works there then please try below things and refresh your website.
Right click and select Inspect.
Go to Application Tab.
Clear everything from local storage, session storage and cookies.
Refresh your website.
This resolved similar issue in my case and hope it will work for others.
Just make sure that this route must be appeared after at all other routes
app.get("/*", function (req, res) {
res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
})
I had the same problem. In my case, the class name wasn't following the patterns (must starts with uppercase). As soon as I corrected it everything started to work well.
Go to your SignIn component or Register component, change the form tag to a div tag OR prevent the form default i.e (e.preventDefault). Also make sure that Javascript is enabled in your browser.
after adding proxy in react package.json restart the reacr server. This works for me.
I had some cookies set in the same url (localhost:8080), probably from a previous development, and it was somehow messing with my React project.
I only found out because (out of despair) I tried with another browser and it worked.
I deleted the cookies and it worked perfectly.
Also a react newbie, I hit this issue. Remembering to add ReactDOM.render(<MyClassName />, document.getElementById("root")); fixed it for me.
In your react project folder install serve if you haven't installed it before;
npm install -g serve
Then serve your project with a static server;
serve -s build
The build is a folder generated by 'npm run build'.
That's it! Visit
http://localhost:5000
by default.
If you are facing the error "You need to enable JavaScript to run this app." in reactjs then 9/10 times there is an issue with your API call. Please cross check API url string, parameters, action type, endpoints, action names, controller names and API call status. You'll be able to find the issue.
verify endpoint url again and again. You'll definitely find a solutions. Also check ur VPN access if you're able to hit the end point.
Go to console --> network tab and see ur API status
Had the same issue, when I was trying serve react static files in node js server. Was missing the following in index.js of server side code.
app.use(express.static(path.resolve(__dirname, '../client/build')));
I had been struggling with this issue the whole morning and after trying all the different hacks of setting up proxy and homepage, it still did not resolve.
And then I checked my js files, and because there was an error which was not being caught while npm start, it was not enabling javascript internally.
How I got to know that this did resolve the issue: Stopping the current run and correcting the issue that was there and then rerunning the server.
I had same problem right now. I forgot to bring ${REACT_APP_API}
before error
const res = await axios.get(`/api/products`)
console.log(res.data)
final solution
const res = await axios.get(`${process.env.REACT_APP_API}/api/products`)
console.log(res.data)
It is case sensitive. Needs to start with upper case:
const router = createBrowserRouter([
{
path: "/",
element: <**I**ndex />,
errorElement: < ErrorPage />,
},{
path: "/login",
element: < **L**ogin />,
},{
path: "/register",
element: < **R**egister />,
}
]);
I have a web app. Back end with node and front end with React. Setup (simplified) goes like this:
index.js (the server)
client
package.json
The client
Now, the client folder contains a front end web application, its contents are basically same as what you get when you type create-react-app.
Inside client there is a build folder which I created by running npm run build from within the client folder.
Server
Now, the index.js from my main folder acts as the node server, inside it I have a line like:
app.use(express.static(__dirname + "/client/build"));
Using this approach I have merged my node server and a client front end application (located inside client folder). You can see I told the server to serve files from the client/build.
All was working fine, till I encountered this.
If I click a react button in my client app which manually calls my router using say:
this.props.router.push('/listmovies');
it correctly shows the page.
But if I type same page in URL address bar and hit ENTER I get error:
Cannot GET /listmovies
The latter error I am pretty sure comes from node server. Because there is no listener for listmovies in index.js (and there should not be). You see basically I think node is intercepting the call and giving me an error. Whereas in my former case where I called router.push I get a correct page.
I hope I managed to explain my problem. Can someone help how to solve this issue?
You have to make the express application redirect all requests to the main React file so react-router can take over. Something like this below the app.use.
app.get('*', function(req, res) {
res.sendFile(__dirname + '/client/build/index.html')
})
This basically handles all wildcards and points it to the index.html. Mind you if you are also implementing API routes on the express app have them above this wildcard statement because otherwise it will intercept them and treat them as client side react-router routes instead of server-side API routes.
I've run meteor build to create my bundle, uploaded to the server, it runs fine, however the .css and .js paths are wrong, as it's using the root url. I need to run this from within a /project folder. Again it's running, but 404 on the files as they're not prefixed with /project.
eg. http://domain.com/65d054cb90ff094804072528d222178ddbf625e22.js?meteor_js_resource=true 404 (Not Found)
needs to be http://domain.com/project/65d054cb90ff094804072528d222178ddbf625e22.js?meteor_js_resource=true
I've tried using ROOT_URL=http://domain.com/project node main.js, that gives an unknown path error, i've also tried using Meteor.absoluteUrl('project', {}); in conjuntion with rooturl but again, no avail.
Any of you fine people have any ideas? :) Thanks!
PS. It's running on an apache server with ProxyPass, if that's of relevance.
You could instruct your apache to redirect those calls with a ProxyPassMatch, such as:
<LocationMatch ^/(.*)meteor_js_resource=true$>
ProxyPassMatch http://localhost/project/$1meteor_js_resource=true
</LocationMatch>
I'm running Apache to serve up Wordpress and want to run Express on the same server.
I've been able to redirect all requests to a particular domain through to port 3000 and server up my Node.JS app accordingly.
I'm running into trouble with js and css files though as they return a 502 error along the lines of DNS error, nothing found at localhost:3000stylesheets/style.css.
As you can see, I'm missing a trailing slash. Do I fix this by using .htaccess or in my app.js file?
I was missing a trailing slash from the ProxyPass directive. Adding this solved the issue.