Problem serving html form file using middleware

Often times, I have issue locating files from root directory. I have made this simple register form, I serve html form files to user.js then serve the user.js to the main server.js using middleware function. i.e app.use(). I was hoping to see the link from the index.html display and finally post the form to be sure that I got the absolute path but to no avail. i have been struggling two days for this please help.
project link: Glitch

I have an old freecodecamp project here that’s similar that may help you out. It needs to be updated for the forms to go through, but maybe it will lead you in the right direction:
https://freecodecamp-qa-ex-passport.glitch.me

2 Likes

thanks christina, it actually help, but i cant find the source code let me have the github link for it please

i can only find the website not the source code github link can help. please send the link to github. or is there a way i can get the source we be ok.

Sorry, I should’ve just given you the source code link. You can also see anyone’s source by pasting the subdomain at the end, FYI. But here it is -

Here are the exercises I used to put that together. They’ve probably updated some of it but worth going through - I know they specifically cover auth middleware:

1 Like

Here is also a Node API I’ve made for a few of my own projects. It doesn’t use pug but the React forms all work when connected to it. Right now I’m just having issues with the DELETE request. :joy: It uses mongoose instead of just mongodb for the connection.

EDIT: The ‘delete’ requests here are fine. The issue I’ve been having, it turns out, came from the front end.

1 Like

thanks, your a life server. now let me explain a bit, before i go through the document you sent. while using the main server everything seems to work fine for me. but when i try using other files from the directory the issue will now arise, especially for middleware. Here is it:
The basic problem am having:

  1. I don’t want the the template to be serve in the main script that is server.js on glitch,
    i want it to be served in //routes/user.js calling router.get();
const express = require("express");
const router = express.Router();
const path = require("path");

router.get("/", function(req, res){
  res.render(path.join("index", {talk: "hey", message: "hellow chris"}));
});






module.exports =  router;

Then using middleware that is, app.use() NOW in the main //server.js serve //routes.use.js then //app.use(,);

//importing packages from package.json  and modules from root directory 
const express = require("express");
const app = express();
const dbInitiation = require("./construct/dbs");
const bodyParser = require("body-parser");
const dotenv = require("dotenv").config({path: "./.env"});
const userRouter = require("./routes/user");
//const userRoute = require("./routes/user");
const path = require("path");
//set directory for views template files 
app.set('views', './views');
//set view engine
app.set('view engine', 'pug');
//middleware,
app.use(bodyParser.urlencoded({extended:false}));
app.use(express.json());
app.use(bodyParser.json());
//serving mongodb 
dbInitiation();

app.use("/user", userRouter);

app.listen(process.env.PORT, function(req, res) {
  console.log("app running on port:", process.env.PORT);
});

In this case am seeing nothing; compare to when i work everything on //server.js
am hoping to see the message //hello chris

If your still struggling with the DELETE, i can help you research. Are you?..

You can separate your routes and put them in files under a routes folder. I did that with my other project. You just have to make sure you name everything properly and follow the conventions for routing the folders/files to the right places.

I actually figured out the Mongoose ‘delete’ routes are fine - the problem seems to be on the front end with the Bootstrap modal. I filed an issue with them on Github and waiting to hear back.

1 Like

ok nice to here but if they cant i dont mind for your research. Now looking at the problem i sent above what do you think could be the issue, that is making the message not display, cause to me i have done the needful, You can also open this link to see the project complete Glitch

Hey @nana-sv,

I think you have a problem here. res.render needs a view name and an object with params, but you are passing it the result from path.join.

I think what you need is just:

res.render("index", {talk: "hey", message: "hellow chris"});

Do you know what I mean? Hope it helps you :blush:

3 Likes

Thanks @SteGriff for diving in and taking a look.

I wanted to add it really helps to go through a tutorial project like the exercises on freeCodeCamp, before trying to build your own project. It gives you a solid starting point, and you definitely shouldn’t rebuild the same thing, but at least you can understand how everything fits together by the end. Without going through a tutorial, you end up stuck on smaller problems and the project will take MUCH longer to complete. Trust me, I’ve done several tutorials and you’ll always get stuck occasionally, but you’ll have a much easier time going forward. Hope that’s helpful. :slight_smile:

1 Like

good morning christina, do you have idea, i cant post html select option . Though i think its parsing strategy ,cause the page is blank withought errors, but the value is not responded. project link: Glitch
i wish to invite you to the project but cant seems to get the christina from search, pictures not the same do you have different user name. please send to join. thanks