How do I add functionality to the html I render in express?

Question

So my goal is, right now, to use NodeJS and express together to take the data I get from a form and write it to a local file. The local file is located on my computer i.e. the server (since I am using localhost). Now, I am able to render the form, but how do I add functionality to this form? Because whenever I create an index.js file in the views folder, the html is not able to access it until and until and unless I dont move it to a public folder, which is the static files folder, the html cant access the js file. Now, when I transfer it to the statics folder, require suddenly stops working.

server.js:

const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'public')));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get("/", (req, res) => {
    console.log("here")
    res.render("index")
})
app.listen(3000)

The `require` function is only available in Node.js which means it won't work in the browser. Although, there are ways to use it but you gonna need to use some build tools. — Molda, Nov 17 '21 at 07:56

niiir · Accepted Answer · 2021-11-17T13:37:14.263

I think you are mixing between the client and server.

The client JS is for adding functionality to you front-end, like, preform some action when a button is clicked. For this you have a few options:

Embedded code - this will be written directly to your HTML inside the <script> tag:

<script>
    document.getElementById("id").innerHTML = "This is my Id";
</script>

Inline code - will be also written to your HTML but not using the <script> tag:

<body id="test">
   <button><a href="#" onClick="alert('Clicked!');">Click Me</a></button>
</body>

External file - a .JS file you will link to your HTML using:

<script src="index.js"></script>

best practice is to place your <script> tag at the very end of your HTML <body> tag.

Now if you want a server to receive the data from the client and preform some actions you will need to create an express server that will expose an endpoint which will do that.

so your HTML will look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="http://localhost:3000/test" method="POST">
      First name: <input type="text" name="firstname" /><br />
      Last name: <input type="text" name="lastname" /><br />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

And your express JS file will look like this:

const express = require("express");

const app = express();

app.use(express.urlencoded({ extended: true }));

app.post("/test", (req, res) => {
  console.log(req.body);
  res.status(200).send(`Info submitted, Full Name: ${req.body.firstname} Last Name: ${req.body.lastname}`);
});

app.listen(3000, () => {
  console.log("Server started on port 3000");
});

How do I add functionality to the html I render in express?

1 Answers1