I am trying to deploy my angular application on windows server for that i am using the express server .
I have configured my server.js file like this:
var express = require('express');
var app = express();
const path = require('path');
app.use(express.static(__dirname + '/dist'));
app.listen(process.env.PORT || 4200);
app.get('*/', function(req,res){
res.sendFile(path.join(__dirname + '/dist/index.html'));
})
console.log('App is listing on ' + 4200);
Also, i have deployed the content that was produced using the ng build command inside dist.
I can successfully able to access the application when i enter http://localhost:4200 in my browser.
But, the problem what i am facing here is the proxy server is not getting created which was used to be created when i was using :
"start": "ng serve --proxy-config local-proxy.config.json",
But, now since i am not calling ng serve instead of this i am calling node server.js which is serving my application on server.
"start": "node server.js --proxy-config local-proxy.config.json",
Can someone can help me please.
Related
Im trying to deploy angular app 13.2
ng build
This command generated dist folder
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(8080,'127.0.0.1');
Using above started server, but finding this error in browser console
Any 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
I'm trying to start Angular app generated via angular CLI, but it seems like the default app-root component doesn't load. Need to say, that I'm using proxy for connection between angular app and express server, and I'm running two scripts at the same time: node bin/www for express/node.js start and ng serve --proxy-config proxy.config.json for starting Angular and creating proxy connection, it looks like this (the part of package.json):
"scripts": {
"start": "concurrently --kill-others \"node bin/www\" \"ng serve --proxy-config proxy.config.json\""
}
The index page loads fine, but it seems that app-root component (the default component, which was created from angular CLI ng new) doesn't loading:
Here is my node.js/express uses and a route:
var express = require('express');
var router = express.Router();
var app = express();
var path = require('path');
app.use(express.static('./src/client/'));
app.use(express.static('./'));
app.use(express.static('./tmp'));
app.use('/*', express.static(path.resolve('src/client/index.html')));
router.get('*', function(req, res) {
res.sendFile(path.resolve('src/client/index.html'));
});
module.exports = router;
And the structure of my project (if needed):
What did I miss? Why the default app-root component doesn't loading? (need to say, when I run ng serve, it starts the angular homepage as needed and the component is OK, so I think the problem is somewhere in express).
Thanks in advance
You should serve the contents of the dist/ folder after calling ng build --prod (the --prod is important, as the default is --dev). So, it would be something like this:
"scripts": {
"start": "ng build --prod && node bin/www"
}
And, more or less adapting your express script:
app.use(express.static('./dist'));
app.use('/*', express.static(path.resolve('dist/index.html')));
router.get('*', function(req, res) {
res.sendFile(path.resolve('dist/index.html'));
});
I am trying to upload the following to my personal server to see how it works:
https://github.com/remarkablemark/universal-react-tutorial
I have tried to change the port here: (server.js)
require('babel-register')({
presets: ['react']
});
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(require('./routes/index.jsx'));
var PORT = 80;
app.listen(PORT, function() {
console.log('http://localhost:' + PORT);
});
but when I type the corresponding url I get this:
**
Index of /ReactServer
Parent Directory
Component.jsx
client.js
public/
routes/
server.js
webpack.config.js
Apache Server at www.alessandrosantese.com Port 80
**
I can see the app working fine at http://localhost:3000/ but I would like to test it on the server (I have never deployed a react application on a live server)
This is more of deploying node.js to remote server.
I would recommend you to use heroku
Follow these steps to deploy your app easily to their servers.
I have an existing node-express project running on express using express server and have middlewares and routing on express
var express = require('express');
var app = express();
require('/path/to/express_conf_file')(app);
app.listen(config.port);
I want to use json-server for easy mocking and I've followed this. My current code looks like this:
var express = require('express');
var app = require('json-server');
var middlewares = express();
var server = app.create(); // Returns an Express server
**var router = server.router('db.json');** // Returns an Express router
server.use(middlewares);
server.use(router);
require('./config/express')(middlewares, config);
server.listen(4000);
server.route('db.json') seems to be deprecated in Express 4.x. What needs to be done to use 'db.json' with express 4.x?
I am invoking my application and json-server using concurrenrly using npm start and in package.json I've defined:
"js-server": "json-server --watch db.json --port 4000",
"start": "concurrently \"gulp command\" \"npm run js-server\""
Can somebody please advice as what should be the correct way of using json-server with Express 4.x?
It is solved here. json-server can be mounted at a certain path within express server. No need to start the json-server separately now. Only gulp command can be used to launch express server.
The json server can be hosted separately also and can be accessed through the specified port from different appilication(s).