I have deloyed a nodejs and angular app on heroku but after deployed routes are not working.
here is my webiste - https://murti123.herokuapp.com
with routes - enter link description here
but with routes it gives a can't get / errror.
i don't know how to resolve it
Here is My project Structureenter code here
You need to resolve your path to the frontend application
so assume that in /public folder you have the dist files from the builded frontend application
app.use(express.static(__dirname + "/public"));
and here you resolve that index.html for any route
app.get("*", function (req, res) {
//path is required at the top of the file ofcourse
//const path = require("path");
res.status(200).sendFile(path.resolve(__dirname + "/public/index.html"));
});
Related
I've deployed a react js application with digitalocean app platform and there's an express js file to make react js as a production application. when I deploy my application it loads smoothly. But when I deploy a new version browsers show only a white screen for the index page. But I can manually route to other pages like /about, /stlogin. Also, the console shows an error stating
Unexpected token '<' main.229b5112.chunk.js:1 . But after clearing the browser cache it loads without any problem. I tried giving a homepage to the package.json file but it didn't work.
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(8080);
build folder and server.js are in same level.
I am deploying a Node.js Express app to a VPS by Render. When I run the app on my local machine, the npm start command does a great job of serving my file when I point the browser to localhost:3001. However, after I deploy, the base directory '/' returns "Not found". I have to point my browser to example.onrender.com/public/index.html.
How do I make sure that example.onrender.com/ routes the request to public/index.html?
Thank you!
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(3001);
Actually just had to change "Publish Directory" settings in Render to ./public
I have a vuejs frontend and an express nodejs backend. But I don't know how I can deploy both of them to the same Amazon EC2 instance with the same domain name pointing to them. Please can anyone help me with this? Or suggest a better way of doing this?
You can merge two repos and deploy both backend and frontend as follows
Inside your nodejs app, open a folder named client and put all the Vue project inside it.
If you are using Vue CLI, change your vue.config.js as follows to create a dist folder inside the root of the nodejs project like
const path = require('path');
module.exports = {
outputDir: path.resolve(__dirname, '../dist'),
};
Make all the get/post endpoints of nodejs application start with /api/ to not get conflict with the path that redirects all the requests to vue client app other than /api/ paths.
Run npm run build to create a dist folder inside nodejs root backend folder
If you are using express.js, serve dist folder with nodejs express backend like;
index.js
const express = require('express');
const app = express();
// Serve Vue Dist Folder
app.use(express.static(__dirname + '/dist'));
app.get('*', (req, res) => res.sendFile(__dirname + '/dist/index.html'));
nodejs with e.g. express can also serve static content. Just put your vuejs files in a static folder.
Im new to NodeJS and Express but i want a simple '/' route to Angular's default index.html (client/src/index.html) which contains the app-root tag.
The '/' route successfully serves the index.html file but it doesn't expand/load the 'app-root' tag into the component's html so i just get blank page.
Im not sure why it cant resolve the app-root tag when routed from Express. Only if i run Angular by 'ng serve' does the index.html successfully load the contents of the app-root tag.
My structure is as follows:
/client
/e2e
/node_modules
/app
app.component.css/html/ts
app.module.ts
/src
index.html
main.ts
package.json
server.js
server.js
var express = require('express');
var path = require('path');
var port = 80;
var app = express();
// set static folder
app.use(express.static(path.join(__dirname, '/client')));
app.get('/', function(req, res, next){
res.sendFile(__dirname + '/client/src/index.html');
});
app.listen(port, function(){
console.log("Server started on port " + port);
});
It look like you didn't do 'ng build' your angular app because main.ts is still there.
When you do the 'ng serve', angular compiles and serve it using webpack-dev-server.
If you want to serve your app from the your node as static, you need a compiled angular app.
You can do the following
$ cd client && ng build
There will be client/dist directory created where your compiled angular app is located and you can serve that on your express
You can change the directory in you server.js like below
app.use(express.static(path.join(__dirname, '/client/dist')));
res.sendFile(__dirname + '/client/dist/index.html');
Hope this helps
I want to create app with nodeJS and angular2 as client side framework. I have created node project and in public folder create whole angular project with angular-cli. I have routes in nodeJS
// api routes
app.get('/api/getSomeData', function(req, res){
res.json({'data': 'Dummy Data'});
});
// Redirect all other routes to angular index file
app.get('*', function(req, res){
res.sendFile(__dirname + '/public/src/index.html');
});
I cant serve angulars index.html page. I dont know if i must build angular and how to do build.
I get it. After ng build command in angular root folder ( node/public ) and next line of code in nodes main file ( my is server.js ) all is good and angular is loaded as is should.
app.use(express.static(__dirname + '/public/dist'));
and node route
app.get('*', function(req, res){
res.sendFile(__dirname + '/public/dist/index.html');
});