Web App with Node and Express Routing and Express-ejs-layout - node.js

I have a server.js file where I require my routing file as below..
userRouter = require('./controllers/user.js');
In the server.js file I have routing for home as..
server.get('/', function(req, res){
res.render('home');
});
The home.ejs is put into the layout.ejs body and displays fine. The problem I am having is with the users/new route in the controllers folder..
router.get('/new', function(req, res){
res.render('users/new')
});
router.post('/', function(req, res){
var newUser = User(req.body.user);
})
The code above isnt being injected into the body of the layout.ejs. If I type in the route http://localhost:3000/users/new it works, but its not in the layout.ejs body. How can I fix this?
Also, how can I get my links in the web app to redirect to the correct route; i.e, signup link goes to http://localhost:3000/users/new

Related

How to resolve 'cannot GET' error on react routes when using ExpressJS to serve react build?

I have the following folder structure for a React client and ExpressJS server setup. I'm trying to serve the react build files from the Express server. I also have defined some route handlers for API from the express server
server /* NodeJS server folder
-node_modules
-app.js
-package.json
client /* React client folder
-build
-node_modules
-src
-components
-App.js
-index.js
-package.json
My express (app.js) has the following code
app.use(express.static(path.join(__dirname, '../client/build')));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});
...
...
app.get('/data', (req, res) => {
res.json(data);
});
Here I'm able to see the home page of my React application but all the routes throws Cannot GET /reactroute. I'm also able to access the /data as defined by app.get handler
Referring some other answers I changed my code in the express server as
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});
...
...
app.get('/data', (req, res) => {
res.json(data);
});
At this time I'm able to access the routes from the react but the /data is not giving the JSON (API) instead it is acting like an another route.
What changes need to be done to get both react routes from the build folder and the route handlers defined in the express.
You have to place get /data before get *.
Like this:
app.get('/data', (req, res) => {
res.json(data);
});
...
...
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});
If you place get * first, it also includes /data. Where * considers all routes which are not mentioned before it.

GET http://localhost:3000/salah.jpg 404 (Not Found) error on console

I'm new on node.js just want to access my home.ejs file from app.js file.
and it is not loading my image that is on home.ejs. just loading the contents.
my app.js code.
var express = require("express")
var app = express();
app.get("/", function(req, res){
res.render("home.ejs");
})
app.listen(3000, function(){
console.log("Server Started!")
})
now my home.ejs code.
<h1>hello</h1>
<img src="salah.jpg">
and now file structure.
In startwithEjs folder.
node_modules
views folder
app.js file
jason files.
In views folder.
home.ejs
salah.jpg
You have provided no way of accessing the image. Try adding something like:
app.get("/salah.jpg", function(req, res){
res.writeHead(200, {'Content-Type': 'image/jpeg'});
res.end("salah.jpg");
})
Eventually you will need to write code that reads e.g. the images folder and provides routes to each of them. Or you could look into the serve-static middleware.
Here's a link to learn more about how to use the response object.

Need specific URL in angular 5

(NodeJS 9.4 and Angular 5).
// In app.js I have,
app.use('/', login);
app.use('/app', application);
// in the route file application.js, I have,
router.get('/', function(req, res, next) {
res.render("application/index");
});
// in angular 5 I have
{
path : 'angular_path',
component : AngularComponent
},{
path : '**',
redirectTo: 'angular_path'
}
Now when I enter the URL
localhost:3000/app
it takes me to
localhost:3000/#/angular_path
All these are working perfectly fine for me,
but now when I refresh the page, it sends me back to the login page,
That's why I need the URL to be
localhost:3000/app/#/angular_path
I need the word /app/ before the angular route.
||HELP||
try this code to set prefix in the URL.
Add this code in the app.js
var router = express.Router();
app.use('/app', router);

Express 4 Route Issues

Just learning nodejs, express, jade. While making progress, I am having trouble understanding how the routes work. I have the routes in a routes folder and the views (Jade files) in a views folder. And that works, but I don't see how.
Let's say I have a page foo. In routes, I have foo.js:
var express = require('express');
var router = express.Router();
/* GET foo page*/
router.get('/', function(req, res) {
res.render('foo', {title: 'Foo' });
});
module.exports = router;
The menu link in the Jade file that calls Foo has an href="/foo" attribute. How come router.get('/', ... ) works? Shouldn't it have to be
router.get('/foo', function(req, res) {
res.render('foo', {title: 'Foo' });
});
When I try to do that, however, it can't find the route and I get a 404, which seems counter to the router docs. I could just go with it and have all the routes get('/', ...) or post('/', ...), which does work, but it just seems wrong.
What am I missing?
Thanks for your insight.
Your app.js file probably contains a line that looks like the following:
app.use('/foo', require('./routes/foo'));
This means that any route defined in ./routes/foo will be relative to /foo. Therefore, your / route is accessed via /foo/.

How to set the default views folder in express?

I am having a lot of trouble getting my routes to direct correctly.
This is my code:
in express.js
app.set('views', config.root + '/app/views')
app.set('view engine', 'jade')
in routes.js
module.exports = function (app) {
// home route
app.get('/', home.index)
}
I keep on getting an error saying that home is not defined, even though I believe that I set the views correctly. Any idea on what the mistake may be.
If it helps, my file structure for my views is under app/views and my config files are config/express.js and config/routes.js
In your routes.js you have not defined home so you will certainly get undefined error. Views does not have anything to do with request handler.
You will use res.render inside your request handler to render the view. Please look in to express.js guide to get started.
Are you trying to do this?
module.exports = function (app) {
// home route
app.get('/', function(req, res){
res.render('home');
});
}
If your request handlers are in separate module you can do this:
if your home request handler is home.js in same path as routes.js you can do following.
Your route.js file
var home = require('./home');//path to your home request handler module
module.exports = function (app) {
// home route
app.get('/', home.index)
}
Your home.js file
exports.index = function(req, res){
res.render('home/index');
}
It will expect you have index.jade view file in your /app/views/home folder.

Resources