Express Renders Pug File to Same URL? - javascript

When I fill out my form and submit my data, it renders my order.pug file on the browser, but my URL is still showing just localhost:3000 instead of localhost:3000/order?
My pug file is in a views folder and my express.js file is just on the main directory for my project
Here is my express file
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static(__dirname + "/public"));
app.set("view engine", "pug");
app.get("/orderPug", (req, res) => {
res.render("orderPug");
});
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "index.html"));
});
Then my post request to accept my data, then render my order.pug file
app.post("/create", async (req, res) => {
//API Authentication code is here
res.render("order")
});
My Pug File looks like this, so if I just navigate to localhost:3000/order it will show the value hard coded like below.
h1 Total: $#{totalCost}
But after I submit my form data it ends up looking like this, except the URL is still on localhost:3000
Total: $100.00
So when I submit my form, it shows the page has updated to order.pug yet the URL still just shows localhost:3000 and I don't think that makes sense for a confirmation page to show?

Related

ExpressJs static files not working correctly

I have an express app and the static files are not working for every route.
When I get to '/', the static styles and images work perfectly when index.ejs is rendered.
When I get '/efbhew', a route that doesn't exist, 404.ejs renders ok.
When I get '/asdw/feff' or other routes like '/df/fg/dfgdfg/sfgd', the static styles and images do not work. Is there something else I have to do in order for it to work?
Below is my code.
const app = express();
app.use(express.static(path.join(__dirname, '../public')));
app.set('views', path.join(__dirname, '../views'));
app.set('view engine', 'ejs');
app.use(cors());
app.use(express.json());
app.get('/', async (req, res) => {
const posts = await Post.find({}).limit(7).sort({ createdAt: -1 }).exec();
res.render('index.ejs', {
latestPosts: posts
});
});
app.get('*', (req, res) => {
res.render('404.ejs');
});
This is the structure of my folders:
I tried changing the path of the public folders to go deeper since when I got to '/asdf/wfds/sdfsd', the image source is 'http://localhost:3000/asdf/wfds/img/logo.png' and it cant find it. But that still didn't work.
When an ejs page at /df/fg/dfgdfg/sfgd references a static file, as in
<img src="img/logo.png"/>
the URL is relative to the URL of the ejs page, so in this example it would be /df/fg/dfgdfg/img/logo.png (note the last segment sfgd is dropped, that's why it works for a page at /efbhew).
But the image exists only as /img/logo.png. Therefore, you should always address it with a path that starts with a slash, as in
<img src="/img/logo.png"/>

How can I access the input form results in an html form?

I am trying to import my project into a nodejs app where I will be able to run the website on a localhost. This works, because when I run index.js and enter the url 'http://localhost:8080/', it redirects me to the homepage of my website.
The problem is, I have a form on my website, and I am trying to access the Feedback.html page where the form resides. What I am trying to do is upon submission, the form data is returned, and the data prints to the terminal (console.log()). If you look at my code, I believe that it is right. However, I am not sure where I need to place my Project4 directory. Should I place it in my views folder?
I am confused on why I need a views folder. Also, my form submission code is unresponsive.
const path = require('path');
const fs = require('fs');
const bodyParser = require('body-parser');
const { render } = require('pug');
const app = express();
//middleware and routing
app.set('view engine', 'pug');
app.use(bodyParser.urlencoded({ extended: true }));
//Viewing website
app.use('/Project4', express.static('Project4'));
app.get('/', function(req, res){
res.redirect('/Project4/index.htm');
});
//------------------------------
//***FORM SUBMISSION PART***
app.get('/Project4/Feedback.html', function(req, res){
res.render('Project4/Feedback.html');
});
app.post('/submit-form', function(req, res){
console.log(req.body);
res.end();
});
//------------------------------
const PORT = process.env.PORT || 8080;
app.listen(PORT, function(error){
if(error){
console.log('Issue with server on port ' + PORT);
}
else{
console.log('Server running on port ' + PORT);
}
}); ```
[![This is what my app folder looks like. Where do I place the Project4 folder so that I can access its form via post method?][1]][1]
[1]: https://i.stack.imgur.com/CzC8p.png
In your form (please include the form as well), the name of the thing you want to access is very important. Using a npm package called body-parser (do npm i body-parser then const bodyParser = require("body-parser"). This basically just extracts the entire body portion of an incoming request stream and exposes it on req.body. Now you have body parser setup, you just need the name of the input (e.g feedback) and do this
console.log(req.body.feedback)
in the app.post route. And you should be set! The thing i should mention though is that the form should have the method of POST, the route is correct and the button is a SUBMIT button. Here is what I would have done.
The form (HTML)
<form action="/" method="post">
<input type="text" name="feedback" placeholder="Your Feedback">
<button type="submit">Submit feedback</button>
</form>
App.js
const express = require('express');
const bodyParser = require("body-parser");
const app = express();
//Those were the modules
app.use(bodyParser.urlencoded({ extended: true }));
//use body parser with the urlencoded extended
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html");
});
//sends the index.html when going to home route (/)
app.post("/", function(req, res){
var feedback = req.body.feedback;
console.log(feedback);
res.redirect("/")
});
// when posted, we make a variable requesting the body, and then the name of the input, which is the name part of the input.
app.listen(3000, function(req, res){
console.log("Server started on port 3000");
}); //self-explanatory.
One last thing. Your views folder is needed because you are using a view engine. Take EJS; if I used res.render(index, {feedbackstuff: feedback}), then the index file would need to be a .ejs file and in the views folder.

I am trying to open an HTML page in the console, I keep getting the res.end output

I am trying to host the html pages on the console, and I keep getting the same output of no HTML page.
I have tried to use
var express = require("express");
var app = express();
app.set("view engine", "ejs");
const requestHandler = (req, res) => {
res.end("why???? please do not show this");
};
app.get("/aboutus", function(req, res){
res.send("aboutus.ejs");
});
I expect when I open console 8080 to see the aboutus page and not the req handler output. The server is working as I get the output with the server that it doesn't output an error.

JADE form submit not caught although route exists

I am using JADE, node.js, and express to create a table to select some data.
Everything is running on localhost.
When I try the route /climateParamSelect it works and displays what I would like to see including URL encoded elements.
Routing to this code snippet is in app.js but I confirmed that it works using /climateParamSelect?test=test. The routes are located in climateParamSelect.js
router.get('/', async function(req, res, next) {
console.log('GET');
console.log(req.query);
});
router.post('/', async function(req, res, next) {
console.log('POST');
console.log(req.params);
});
module.exports = router;
The code in app.js may be important after all, so here is an excerpt:
const express = require('express');
var tableSelectRouter = require('./routes/tableSelect');
var cpSelectRouter = require('./routes/climateParamSelect');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/climateParamSelect', cpSelectRouter);
app.use('/tableSel', tableSelectRouter);
When I use the submit button of the following page it is invoked but for some reason, the route above is never taken. Instead, it displays: waiting for localhost.
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css')
script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js')
script(src='https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js')
script.
$(document).ready(function() {
$('#selTable').DataTable();
});
body
form(name='productionSelect', method='post', action='/climateParamSelect')
div#wrapper
h1 Select production data for feature generation
br
table#selTable.display
thead
tr
th headers
//...
tbody
tr
td
input(type='checkbox',id='#{r}',name='#{r}')
td
//...
br
input(type='submit',value='Select Production',name='prodSubmit',data-transition='fade', data-theme='c')
What am I missing here?
Thank you
The browser will sit there spinning until it receives a response, and there is no response sent in your route. I'm sure you'll want to render a view, but to test it quickly just use res.send and a string.
The second issue is in how you're reading the data sent from the client. req.params is used for dynamic URL parsing with variables in the route. To handle form data (which is what you're sending here) you can use req.body.
Changing your route to this should fix your issues:
router.post('/climateParamSelect', async function(req, res, next) {
console.log('POST');
console.log(req.body);
res.send("hello");
});

redirected to wrong html page when using express.static(__dirname) function in node.js with express

I have a login page called login.html and an index page called index.html. I want to make a authentication and that only a connected user can access the index page.
I did not implement the post method on the login HTML page. I have to manually send the login username and password by going on this url:
http://localhost:2222/?username=a&password=b
Everything worked but I could not see my css, js and some other files in the index.html. To solve this problem I added this at the beginning of my code:
app.use(express.static(__dirname));
The problem is that now if I go to the localhost:2222 it shows the index.html file instead of the login.html file. Even if I use:
app.get('/', function (req, res) {
res.redirect('/login');
});
How does it come ? How can I solve this ?
The full code is:
var express = require("express");
var port = process.env.PORT || 2222;
var app = express();
app.use(express.static(__dirname));
var session = require('express-session')
app.use(session({
secret: 'keyboardcat',
resave: true,
saveUninitialized: true
}));
function checkAuth(req, res, next) {
if (!req.session.user_id) {
res.sendfile('login.html');
} else {
next();
}
}
app.get('/', function (req, res) {
res.redirect('/login');
});
app.get("/login", function(req, res) {
if (req.query.username === 'a' && req.query.password === 'b') {
req.session.user_id = req.query.username;
res.redirect('index');
} else {
res.sendfile('login.html');
}
});
app.get('/index', checkAuth, function(req, res){
res.sendfile('index.html');
});
app.get('/logout', function (req, res) {
delete req.session.user_id;
res.redirect('/login');
});
My file tree is as follow: index.html, login.html and server.js are in a folder called server. In this folder sever are also 4 folders: JS, CSS, Images and Random.
You are using project folder for static as you posted app.use(express.static(__dirname));. ExpressJS using index.html as default index page. So you need to rename index.html to something else like main.html and use res.sendfile('main.html');.
Alternate Solution:
Create a folder say public and put all static content(js, css and images) into public folder and please do not put html file into public folder and use app.use(express.static(__dirname) + '/public');.
It is very important that you fix your directory structure if you're using express.static, because at this moment, it is possible to run http://localhost:2222/server.js and download the server files, which is where you currently store your secrets.
What I recommend you to do is create a server/static directory, and place all HTML, CSS, JS, images and other assets inside, and then change this line
app.use(express.static(__dirname));
to
app.use(express.static(__dirname + '/static'));
Additionally, you should never, ever send auth data through GET parameters like you currently do with http://localhost:2222/?username=a&password=b. You need to change this route into a POST request, by editing this line:
app.get("/login", function(req, res) {
to
app.post("/login", function(req, res) {
You might need to change your form in the HTML from <form method="get" ...> to <form method="post" ...>
You have to define the root directory as a first parameter for serving static content:
app.use('/', express.static(__dirname));
Or alternatively you can use:
app.use(express.static(__dirname + '/'));

Categories

Resources