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');
});
Related
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"));
});
I cannot access the routes that I have set up in my app when running from the build version. I can access them on dev enviroment though when my react app runs at a different port than the server.
I have included the below in my express server in order for it to serve the react app and only the root page is showing.
app.use(express.static(path.join(__dirname, 'build')))
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
React Router does all the routing in the browser, so you need to make sure that you send the index.html file to your users for every route.
This should be all you need:
app.use('/static', express.static(path.join(__dirname, '../client/build//static')));
app.get('*', function(req, res) {
res.sendFile('index.html', {root: path.join(__dirname, '../../client/build/')});
});
I found the solution of my issue.
I was having the HTML anchor tags instead of the Link attribute of react-router to my code.
Replaced them accordingly and my app is operating normaly.
I have a react app (with router) that I built and that I use statically on a Node.JS server.
I can navigate inside the app thanks to the internal links (Link & Navlink) but if I enter a url directly, I get the following message
/home/deploy/www/mydomain.fr/production/releases/20181205130322/client/index.html
This is my config to render builded react-app as static files
app.use(express.static(path.join(__dirname, 'client')));
app.get('*', function(req, res) {
res.send(path.join(__dirname, 'client', 'index.html'));
});
Thank you for your help
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
Newbie question that is driving me crazy. I am trying to build the ToDo app with the MEAN stack and I can't get the Express server to connect to Angular 2. I believe it has something to do with where I have my index.html view relative to the Angular installation, but I can't figure it out.
Your project folder struction should like below
project/server [Node]
project/server.js is your express server
// Get our API routes
const api = require('./server/routes/api');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set our api routes
app.use('/api', api);
// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
project/src/index.html [angular code]
You can build angular code into dist using
ng build
This creates the dist folder with the angular 2 app built files. Now we can serve the app with express.
For run server use
node server.js
which create server
Go through https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli for more information.
Thanks in advance