How to link an existing Angular 2 app to Nodejs Server? - javascript

I have an Angular 2 app with this structure :
Structure of my Angular app
Then in server side :
Structure of server app
I see that there is 2 module dependencies folders, but I don't know which one I sould keep.
Here is my index.js file :
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
// 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, 'client/portfolio')));
// 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, 'client/portfolio/src/index.html'));
});
/**
* Get port from environment and store in Express.
*/
const port = process.env.PORT || '3001';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port, () => console.log(`API running on localhost:${port}`));
When I start server I get this message :
Loading AppComponent content here ...
But it stops here and doesn't render the Angular application.
index.html file :
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/hammerjs/hammer.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>

Here's a good example of integrating AngularJS with NodeJS [open tutorial]
The trick is in this block
/* GET home page. */
router.get('/', function(req, res, next) {
res.sendFile(path.join(__dirname, '../', 'views', 'index.html'));
});

Related

CSS file is not connecting in an express app

When running my app.js file
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Serving on port ${port}`)
})
this is my index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1> Testing CSS</h1>
</body>
</html>
then I can not observe the changes of CSS file on the page. But when I open the HTML file with live serever I can see the CSS changes why is this happening.
When I am running my app.js file css is not connecting. But when I open the HTML file with live server CSS file is connecting. What is the reason behind this ??
app.use(express.static(path.join(__dirname, 'public')));
include this in your app.js create a folder called public and put the style.css in your public directory.
your code would be
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))
app.use(express.static(path.join(__dirname, 'public'))); //<-here
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '/index.html'));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Serving on port ${port}`)
})

res.render not working as expected? doesn't load new pages

I'm trying to use res.render to load a new page using handlebars, but it doesn't seem to working.
Here are my files:
main.js
var express = require("express");
var exphbs = require('express-handlebars');
var app = express();
app.engine('handlebars', exphbs({ defaultLayout: 'main' }));
app.set('view engine', 'handlebars');
app.use('/static', express.static('public'));
var HTTP_PORT = process.env.PORT || 8080;
function onHttpStart() {
console.log("Express http server listening on: " + HTTP_PORT);
}
app.get("/", function (req, res) {
res.render("home")
});
app.get("/roomList", function (req, res) {
res.render('roomList')
});
app.listen(HTTP_PORT, onHttpStart);
Here's the main.handlebars:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/css/bootstrap.css" media="screen" charset="utf-8">
<link rel="stylesheet" href="/public/css/custom.css">
<meta charset="utf-8">
<title>Site</title>
</head>
<body>
{{{body}}}
<script src="/static/js/jquery.js" charset="utf-8"></script>
<script src="/static/js/bootstrap.js" charset="utf-8"></script>
<script src="/public/js/custom.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</script>
</body>
</html>
When attempting to use res.render, nothing happens, despite there being html in home.handlebars and roomList.handlebars
Are there any steps I'm missing?
I have a default navbar in the main file, and it does stay when switching, but nothing new appears.

How to refer a css file from index.html in React

I have a folder called assets which have a styles.css and then I have index.html which I would want to reference styles.css but for some reason it can't.
My current solution is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My App</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
And I have the node server running like this:
var webpack = require("webpack");
var config = require("./webpack.config.js");
var http = require('http');
var express = require('express');
var app = express();
var proxy = require('http-proxy-middleware');
var path = require('path');
const compiler = webpack(config);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true,
publicPath: "/"
}));
app.use(require("webpack-hot-middleware")(compiler));
app.use('/auth', proxy('http://localhost:8081', {changeOrigin: true}));
app.use('/api', proxy('http://localhost:8081', {changeOrigin: true}));
app.get("*", function(req, res) {
res.sendFile(__dirname + '/index.html');
});
/**
* Anything in public can be accessed statically without
* this express router getting involved
*/
app.use(express.static(path.join(__dirname, 'assets'), {
dotfiles: 'ignore',
index: false
}));
var server = http.createServer(app);
server.listen(3000, function() {
console.log("express listening at localhost:3000");
});
This is not working for me it cannot find the css file, how can I make it so I can reference the css file from index.html. Also I have index.js on my src folder which is used as an entrance file for running the whole React App.
Add the route for styles.css before app.get("*",...)
app.get("/styles.css", function(req, res) {
res.sendFile(__dirname + '/styles.css');
});

Angular : Uncaught ReferenceError: app is not defined

I am trying to create this very simple meanstack app and its almost running but with an uncaught reference error when it is redirecting to index page. Server is running ok. Browser is showing the text (Loading..) as in the index page. But as the custom tag should have gone along with the selector to app.component.ts and printed "My First Angular App", it doesn't. Instead it is saying in console that "app is not defined".
Can anyone help? I am new to MEAN & Angular, so kindly elaborate. And please excuse my silly mistakes if there are any (or many).
This is my index.html
<html>
<head>
<title>MyTaskList</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>System.import(app).catch(function(err){ console.error(err);});</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
this is my app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: 'My First Angular App'
})
export class AppComponent { }
my index.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next){
res.render('index.html');
});
module.exports = router;
and finally my server.js (starting point)
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var tasks = require('./routes/tasks');
var port = 3000;
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine','ejs');
app.engine('html', require('ejs').renderFile);
app.use(express.static(path.join(__dirname, 'client')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/', index);
app.use('/api', tasks);
app.listen(port, function(){
console.log('Server started on port '+port);
});
Put app in quotes because Javascript thinks app is a variable but it should actually be a string.

Express.js not finding stylesheet

I'm working on an app using the MEAN stack, and I'm having trouble getting my main index page to pick up my stylesheet. Running node server works fine, the index.html page is rendering, and there are no console errors. Hitting http://localhost:3000/public/css/app.css returns the CSS as expected. So the file is there and accessible, but the styles aren't being applied to the index page.
Any idea what's going on?
./server.js
var config = require('./server/config/environment');
var express = require('./server/config/express');
var app = express();
app.listen(config.port, function() {
console.log('Server is listening on port %d', config.port);
});
exports = module.exports = app;
./server/config/express.js
var express = require('express');
var path = require('path');
module.exports = function() {
var app = express();
app.set('view engine', 'ejs');
require('../server.routes.js')(app);
app.use("/public/css", express.static(path.resolve('public/css')));
app.get('/public/css/app.css', function(request, response) {
response.sendFile(path.resolve('public/css/app.css'));
});
return app;
};
./server/server.routes.js
module.exports = function(app) {
app.get('/', require('./server.controller').render);
};
./server/server.controller.js
module.exports.render = function(request, response) {
response.render('index');
};
./views/index.ejs
<head>
<base href="/">
<link rel="stylesheet" src="/public/css/app.css">
</head>
./public/css/app.css
body {
margin: 70px 20px 20px 20px;
}
Try this
./views/index.ejs
<head>
<base href="/">
<link rel="stylesheet" href="/css/app.css">
</head>
./server/config/express.js
var express = require('express');
var path = require('path');
module.exports = function() {
var app = express();
app.set('view engine', 'ejs');
require('../server.routes.js')(app);
app.use(express.static(path.resolve(__dirname, 'public')));
return app;
};
When you use express.static() you are registering that as a public folder, meaning the client doesn't need to actually know what the name of the folder is. Essentially what you were doing was calling
<head>
<base href="/">
<link rel="stylesheet" href="/public/css/public/css/app.css">
</head>
Usually people register a base folder and then put the css in the css/ subfolder and the js in the js/ subfolder
EDIT: #HydraHorn realized on his own that he was using <link src="..."> instead of <link href="...">. That said it still would not have worked without the changes to express.static(). I have made the changes above to not confuse future visitors

Categories