I am using angular on the front end and express js MongoDB on the backend, in server.js file of express application I am listening on port 3000
var server = app.listen(3000, function () {
console.log('Server listening at http://' + server.address().address + ':' + server.address().port);
});
What I want is when I hit localhost:3000 my HTML page in angular js application should get render, which I achieved using
app.get('/', function (req, res) {
res.sendfile(__dirname + '/app/userlogin/userlogin.html');
});
When I hit localhost:3000 my HTML page is getting render but it is not including bootstrap files I am getting error 404 for scripts and links which I am adding in head tag but intelligence of vs2015 providing those bootstrap script files when I am trying to add them in my HTML, Following is my project structure and I have placed my bootstrap js and CSS files respectively in app -> js and app -> CSS
You need a public_static folder containing all your frontend code.
The express app should serve it with express.static('')
server.js
app.use(express.static('public_static'));
Directory Structure
-- server.js
-- public_static
-- index.html ( Rename your userlogin.html )
-- css
-- JS ( Angular files )
--- controllers
--- directives
--- services
Related
I'm an express noob here and building a React App with server using express and client using create-react-app.
What I want to do
I want to update the title and meta tag in the index.html.
So browser requests url -> Server gets request and adds the title and tag to the index.html -> return it to the browser.
Listed my code here
...
app.use(bodyParser.json())
app.use(aMiddleware)
app.use("/api/foo", bar)
app.use(express.static('client/build'));
if (process.env.NODE_ENV === 'production') {
const path = require('path');
app.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html'))
})
}
Questions
Code is functioning, but I don't know how to replace the title/tag in the index.html
How do I update/replace index for environment that is not prod?
Fo prod environment, I use path.resolve(__dirname, '../client', 'build', 'index.html'), then where is index.html for dev environment? I see there is an index.html in public folder, is it the one that got rendered for dev environment?
I tried to add this code before app.use(express.static(...))
app.get('/', function(req, res) => {
// maybe replace string in the index.html (though I don't know where is it
// then res.send(...)?
})
but this never got triggered. Why?
Stuck on this for a while, tried many things, any help would be great.
You can use react-helmet for this... Or switch to Nextjs which is server side.
https://www.npmjs.com/package/react-helmet
I want to deploy CRA bundles to s3 and serve from cloudfront. But index file should be express view (template, I want to add some data to it). All solutions I've found assume serverless or serve CRA index directly from node.
So, I need index to be template and contain cloudfront URLs to bundles. How can I achieve this?
If you need to create and index.html you could do that without template
app.get('/', function(req, res) {
res.type('text/html');
res.send('<html>...</html>');
});
Or with templates like
Jade
doctype html
html
head
title Jade Page
link(href='https://cloudf../css/main.css', rel='stylesheet')
body
h1 This page is produced by Jade engine
p some paragraph here..
Source : https://www.tutorialsteacher.com/nodejs/jade-template-engine
Pug
html
head
title= title
link(href='https://cloudf../css/main.css' rel='stylesheet')
body
h1= message
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!'});
});
https://scriptverse.academy/tutorials/nodejs-express-pug.html
https://stackoverflow.com/a/38047123/3957754
I build a website using angular js. But That is not a SPA. I use angular js for API calling and fetch some data only so now I want to do routing for custom URL of my HTML pages how will I do it ? I am serving my website using nodeJs. is there any configuration in node js to set custom URL of static website/routing.
For using the routes in nodejs you can use express.Router() module.It can be installed same as express and then you can define the routes on that.
For example :-
var adminRouter = express.Router();
adminRouter.get('/',function(req,res){
res.send('Here is the dashboard for my app');
});
adminRouter.get('/users',function(req,res){
res.send('Here is the menu to show all the users');
});
//Now to apply the routes to your app
app.use('/admin',adminRouter);
You can also route the middleware of your app and the url parameters separately
How to deploy angularjs with nodejs as backend requesting server, after building the angularjs package
My project structure:
app/
app/config
app/scripts
app/styles
app/views
bower_components/
dist/
node_modules/
test/
server.js
After building the angular package using grunt, i am using only the dist folder. But i want to use node for my request, to server. So how to setup the nodejs packages inside dist build folder. Which will be deployed to parse.com
Basically you need a simple webserver which is always returning index.html + the assets.
If I'm right in your root (i guess /dist at this point) you have to create an app.js file containing the following:
var express = require('express');
var bodyParser = require('body-parser')
var path = require('path')
var app = express();
app.use(bodyParser.urlencoded({extended:false}));
app.use(function (req, res, next) {
if (path.extname(req.path).length > 0) {
// normal static file request
next();
}
else {
// should force return `index.html` for angular.js
req.url = '/index.html';
next();
}
});
// static file serve
app.use(express.static(__dirname))
app.listen(3000)
I have an AngularJS app on a NodeJS server with ExpressJS. Now I am serving an Angular app as static files:
app.use(express.static(__dirname + '/app'));
But in navigation, I have a # sign:
http://127.0.0.1:8080/#/queryes
To solve this problem, I put this code in the Angular Router:
$locationProvider.html5Mode(true);
But now I can't get partial views. How do I mix Angular Routes with ExpressJS?
In order to use AngularJS html5mode along with Express, you must serve "index.html" for all requests to leave all routing up to AngularJS. I had this same problem a while back.
So first, you declare all API endpoint routes, any static file directories (CSS, JS, partials, etc), and then serve index.html for all remaining requests. For example:
// serve all asset files from necessary directories
app.use("/js", express.static(__dirname + "/app/js"));
app.use("/img", express.static(__dirname + "/app/img"));
app.use("/css", express.static(__dirname + "/app/css"));
app.use("/partials", express.static(__dirname + "/app/partials"));
app.use("/templates", express.static(__dirname + "/app/templates"));
// any API endpoints
app.post('/api/v1/auth/login', routes.auth.login);
// serve index.html for all remaining routes, in order to leave routing up to angular
app.all("/*", function(req, res, next) {
res.sendfile("index.html", { root: __dirname + "/app" });
});