:)
i have a nodeJS app on firebase, the front of this app is do with ReactJS.
As long as I do not update the web page everything works perfectly, but if I update, nodeJS takes priority over the url and displays an error because no action is defined for the url
I made a sendFile to the index.html for each url like that :
app.get('*', (req, res) => {
res.sendFile('index.html', {root: `${__dirname}/../public`});
});
Locally, it works perfectly, I can update without losing the page where I am, but when I deploy my application on firebase it does not work. during the update it shows me "not found" and that in the console of the browser
console of the brower
I thought that it could not find the file because firebase arranged them differently but I did not find anything concerning the architecture of firebase :/
I don't know if it's completely clear, I don't know how to explain it better ^^ '
thanks for your time :)
I found!, firebase apparently does not allow the code to leave the function folder (donation impossible to do ../public), so I simply put the public folder in the function folder .
Its gives its:
app.get('*', (req, res) => {
res.sendFile('index.html', {root: `${__dirname}/public`});
});
Related
I have an app.js node main file where I define my api path as the following
app.get('/api/users', UserController.get);
Below in the same file I have the following
app.use(express.static(path.resolve(__dirname, "./front/build")));
app.get("*", function (request, response) {
response.sendFile(path.resolve(__dirname, "./front/build", "index.html"));
});
The index.html successfully serves React App.
If I open my heroku app somewhere at my-app.herokuapp.com it will open the React app which is intended but the Problem is my-app.herokuapp.com/api/users also serves index.html file instead of JSON that the endpoint is supposed to return.
I tried
I replaced endpoint route definition to come before the "" definition (didn't suffice)
EVEN more, I removed redirection to index.html but heroku still opens the index.html page with any type of request (the "" redirection still works). So, it might have cached something?
Is it about cache (how to clean?) or any other suggestions?
You should create routes and work in a proper flow for each functionality,
For Example:
//app.js
app.use("/api/user",userRoutes);
//UserRoutes
router.post("/signup",UserController.signup);
//UserController
exports.signup = async (req,res,next) => {
//Signup function to add a new user when the user provides required info
}
In this way, you code will be easily accessible and much efficient
I have an elm application running on Heroku.
I didn't want to use a third party elm buildpack, so I compiled the elm files locally and pushed elm.js onto the Heroku server.
My application is using Node.js backend so I'm using this code in expresss to
serve index.html:
if(process.env.NODE_ENV === 'production') {
app.use(express.static('client'));
app.get('*', (res:any) => {
res.sendFile(path.resolve(__dirname, 'client', 'index.html'));
});
}
I can go to the heroku URL and everything works perfectly. If I click on the internal /login link, I'm redirected to the login page and my url changes to ww.mywebsite.com/login. Internal routing is not my problem.
This is my problem: Although internal routing works, if I were to manually write www.mywebsite.com/login in the navigation bar, instead of seeing the login page, I see Internal Server Error
How do I fix this? Would I need a heroku buildback to accomplish this?
As #kaskelotti from the comments pointed out, Internal Server Error was printing because the files were being found, but another error was happening once they were found. If the files had not been found I would have received a 404 error.
This was a syntax error in my express code that matched all requests with my static index.html file.
The code posted in my question is wrong, THIS is how it should look:
if(process.env.NODE_ENV === 'production') {
app.use(express.static('client'));
app.get('*', (req , res) => {
res.sendFile(path.resolve(__dirname, 'client', 'index.html'));
});
}
The difference is the argument to the callback function in app.get. Originally it was (res) instead of (req, res), so the res variable was mistaken for an object of type Request and not Response, since it was the first argument.
Also as #kaskelotti pointed out, Heroku is irrelevant to this problem.
I am creating a simple app using angular and I am trying to use mongodb to save my data. So far I managed to create my SPA with angular and deploy it to heroku adding the server.js file. My problem starts when I tried to connect mongodb.
Currently I was serving my page using
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname,'/dist/showoff/index.html'));
});
Inside index.html I am calling <app-root> and my application has two routes: /display and /control
I then realized I have to add some more routes to save and read from my database through a service, so I had to add things like:
router.route('/players').get((req, res) => {
Player.find((err, player) => {
if (err)
console.log(err);
else
res.json(player);
});
});
Problem is that I cant reach those routes since I have already one with /*. I tried writing this other routes on top as I figured it might take the first it finds but its not working and I am always redirected to my index.html
My question is:
Is there a way to deploy my SPA like this and still use mongo? or do I need to somehow restructure everything since my approach isn't right?
You can find my whole code here if needed GitHub code
In case it helps anyone I did the following. Not sure if its the best way to go but it worked.
I divided my /* route as follows
app.get('/display', function(req,res) {
res.sendFile(path.join(__dirname,'/dist/showoff/index.html'));
});
app.get('/control', function(req,res) {
res.sendFile(path.join(__dirname,'/dist/showoff/index.html'));
});
And continue to add handlers for other routes there, which manage the requests to write and read from the database.
I'm new to node. I was using express-handlebars as my view-engine, but now I've added React and I understood that I no longer require handlebars. The problem that I'm having is that in order to get to the index.html page, without handlebars, I had to use
app.use(express.static('./public'));
Everything gets rendered from react, but what if I want to do some other things when the user goes to the index page like
app.get("/",function(req,res){
console.log("connected");
});
If I add the get request after exporting the static files, the console.log never gets called. If I use it before, it does get called, but I can see the page loading forever. How should I structure the application now that I'm using react and I don t have a view engine anymore?
In your specific case, if you don't want to render anything to the user, you should turn your function into a middleware :
app.get("/",function(req,res, next){
console.log("connected");
next();
});
and put it before the app.use(express.static('./public'));
However, if you want to do actual logic with return values and such, I would suggest that you setup some kind of API that you request using Ajax from the client.
You can check my repository
https://github.com/kennethmervin01/react-node-production
it's a boilerplate to serve react app in node.js/express
then check my code inside app.js
You just need to copy the production build of your react app inside the react folder
app.use(express.static(path.join(__dirname, "../react")));
app.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "../react", "index.html"));
});
I have made an app with AngularJS with an expressJS backend. Now I want to make it crawlable and I've found prerender.io. I think I've done everything correct bur for some reason I don't see any statistics in the prerenderer dashboard.
In my app.configure function I've included the token like follows:
app.use(require('prerender-node').set('prerenderToken', 'my-token'));
And in my HTML I've included the meta-fragment tag:
<meta name="fragment" content="!">
The last ting I've done was to tell AngularJS to use a hashprefix:
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
But for some reason, if I refer to the documentation, I don't get the correct result. Below you can see what it is supposed to do:
Google sends a request to your server like this:
http://www.example.com/?_escaped_fragment_=/user/123
You turn the url back into this:
http://www.example.com/#!/user/123
For some reason if I try this it still adds the #! signs add the end of the URL, so if I request the URL of my app like google I get this:
http://www.my-website.com/?_escaped_fragment_=#!/home
So it does not replace the hash in the url. I think this is the cause of my problem.
Thanks in advance!
Edit - if I for example add an extra route then it works:
app.get('/', function (req, res) {
res.sendfile('./public/index.html');
});
app.get('/test', function (req, res) {
res.sendfile('./public/index.html');
});
the '/' route doesn't work the '/test' route does work.
Ok I solved my problem. The '/' route was never called because I had an index.html file inside my webpublic folder. I renamed this to public.html and changed the '/' route to get this file instead of the index.html file.
app.get('/', function (req, res) {
res.sendfile('./public/public.html');
});