I tried to connect angular front end with nodejs earlier I ran ng build on public folder of app and then ran localhost:3000. No error was given on compilation but app is broken now. Now do I achieve it? My folder structure is like this
client
public
app.js
client contains all angular code, public contains compiled code of angular
till I have also changed output path to ../public in angular.json.
And here is my app.js:
var express = require('express');
var path= require('path');
var cors = require('cors');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var passport = require('passport');
var app= express();
var port = 3000;
app.set('view engine','ejs');
//app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, '/views'));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/api', routesApi);
app.get('/', (req,res) => {
res.send("Invalid page");
});
app.listen(port, () => {
console.log(`Starting the server at port ${port}`);
});
I think up to now you have a build of a running angular application and perfectly running node.js server.
What you have to do is host your client application. Follow the following steps to get this working.
Install http-server globally on your machine using npm install http-server -g command
Then run http-server /path/to/your/dist/folder. (You should get a dist folder after running ng build --prod)
Then run your node.js server.
And open your browser and go to http://localhost:8080
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...
I have an app that run normally in local development but when I deploy it (Ubuntu 21.x server) I run node/pm2 start (even installed nodemon to try) I get 404 error(not my 404 page). That how I deployed it after logging to server:
sudo apt update
sudo apt upgrade
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
git clone (repo)
cd (repo)
npm install
then I run it with
node app.js
//or
pm2 start app.js
//even using nodemon
nodemon app.js
and I installed Nginx and I get their welcoming HTML when I refer to IP address but I get 404 when I go the project port 3000
that's my server code except the POST req:
const express = require('express');
const helmet = require('helmet');
const compression = require('compression');
const bodyParser = require('body-parser');
// express app
const app = express();
app.use(helmet);
app.use(compression());
// bodyparser middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// listen for request
app.listen(process.env.PORT || 3000);
// miidleware static files
app.use(express.static('public'));
app.use(express.static('script'));
app.get('/', (req, res) => {
res.sendFile('./views/index.html', { root: __dirname });
});
app.use((req, res) => {
res.status(404).sendFile('./views/404.html', { root: __dirname });
});
spent around 12 days trying so would appreciate help very much.
It seems that the server you have deployed on has an open port 80, but not port 3000.
If you want to access your express app via port 3000, you need to open the port on the Ubuntu server. How to do this depends on a vast number of variables from where the server is located to what firewall you are using.
If what you are trying to do is have your express app shown by Nginx on port 80, you will need to create a reverse proxy using Nginx.
To do this, read up on this here. There are too many variables for us to help further
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'm fairly new to Gatsby and React, but I'm looking to deploy the static assets generated by a Gatsby build on an Express server. If I import the Public folder generated by 'gatsby build' into the server directory, and use the following code:
var express = require('express');
var path = require('path');
const app = express();
app.set('view engine', 'html');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', function(req,res){
res.render('./public/index')
});
app.listen(8080, function(){
console.log("Running on port 8080")
});
The homepage is just blank. My question is, how can I configure my Express app and Gatsby (and therefore React and React Router) so that the Gatsby site will run through my Express app?
I generated an Angular2 project by using Angular-CLI. This is the front-end side. Now I'd like to add an Express server but I don't know how exactly should I do that.
Should I add an express app.js file into generated by Angualar-CLI "src" directory? I've tried it and what's next? To start Angular-CLI project, I need to type ng serve in CMD. To start server, I need to type node app.js.
Example of app.js
var express = require('express'),
path = require('path'),
favicon = require('serve-favicon'),
logger = require('morgan'),
cookieParser = require('cookie-parser'),
bodyParser = require('body-parser');
var app = express();
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen("8080", function() {
console.log("at 8080 port");
});
module.exports = app;
Well... Angular2 doesn't work when I start app by node app.js. ng serve builds all files and in mysterious for me way puts it all together.
Maybe I should create front-end and back-end completely separated? But what then? Use technology like Nginx for reverse proxy?