I have web application which is developed using ejs + angularJs 1.0 and running in node server. Since these ejs + angular provides only static files, I want to make my app running in webserver. Currently the URL mapping is done in node app.js, hence if we load the URL it renders the html from the ejs. For more information, I have added node app.js configuration:
app.set('title', wsConfig.title);
app.use(bodyParser.json());
app.engine('.html', ejs.__express);
app.set('view engine', 'ejs');
app.use(express.static('./public'));
app.set('views', path.join(__dirname, 'public')); // Set the views path
app.use(function(req, res, next) {
if (req.url.substr(-1) == '/' && req.url.length > 1)
res.redirect(301, req.url.slice(0, -1));
else
next();
});
app.get('/', function(req, res) {
res.render('login', { title: wsConfig.title });
});
app.get('/home', function(req, res) {
res.render('index', { title: wsConfig.title });
});
Hence I need to build a dist folder with js and rendered ejs files instead using node server for rendering. So that I will deploy this dist directory in web server. I thought of using webpack to accomplish this. Please give our suggestions.
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 am trying to understand how to include jade and handlebar exactly as I am trying to add angular js to my server that is also using jade for serving other web pages.
I heard of consolidate.js and this is my app.js code:
var engines = require('consolidate');
var exphbs = require('express-handlebars');
var app = express();
app.engine('jade', engines.jade);
app.engine('handlebars', engines.handlebars);
app.set('view engine', 'handlebars');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon(path.join(__dirname, 'public', 'img/favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser(config.cookieSecret.secret));
app.use(express.static(path.join(__dirname, 'public')));
How do I get the view engine setup for both? Also, how do I add the following into my code without affecting other links:
// Application UI route
app.get('*', function(req, res) {
res.render('indexer');
});
app.get('/templates/*', function(req, res) {
res.render('../client/templates/' + req.params[0])
});
I am trying to deploy my angular app to heroku. It runs fine locally.
Directory:
nice-notes
controllers
api.js
index.js
Model
model.js
public
main.js
main.css
views
index.jade
layout.jade
payment.jade
app.js
package.json
Procfile
node_modules
My app.js looks like so:
app.set('view engine', 'jade');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: false}));
app.get('/', indexController.index);
app.get('/payment', indexController.payment);
app.get('/api/notes', apiController.get);
app.post('/api/notes', apiController.noteUpdate);
My controller:
var Note = require('../Model/model')
var indexController = {
index: function(req, res) {
res.render('index');
},
payment: function(req, res) {
res.render('payment');
}
}
module.exports = indexController;
I have tried using this instead, but 'path' is not defined.
app.set('views', path.join(__dirname, 'views'));
All my base code is identical to my other angular apps, apart from the fact that I'm not injecting any templates here (using ng-view).
I have tried changing the file paths and other potential solutions to no avail.
The problem was that I had changed some filenames (capitalising the first letter), and then changed it back, but it never logged it.
Typing
heroku run 'ls -al'
into the shell creates a one-off dyno and displays the file-system as heroku sees it.
This is the thread that solved my problem:
Heroku Cannot find module
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" });
});
I'm struggling to perform routing using Express in the ng-boilerplate structure.
I'd like to do it using HTML view files (as opposed to JADE).
Can anyone help provide examples of how to do this?
I keep getting Failed to lookup view xx errors when using app.get('/', function(req, res){
res.render('index');
});
Try to set your views directory:
var express = require('express');
var app = express();
app.configure(function() {
app.use(express.static(__dirname + '/public'));
app.set('views', __dirname + '/views'); // <=== Where your HTML view files are present
app.set('view engine', 'jade'); //Your view engine to be set here
});
For detailed information:
Express API
Related Questions and answers