Express.js Router Downloading EJS File instead of Showing it

Question

So, I'm in the process of creating a live video sharing/watching feature using Pure Node.js without the use of any frameworks.

However, while halfway through the development, I encountered an issue where Express is downloading an EJS file instead of rendering it.

How did I stumble upon this issue? Well, I'm building a Zoom room-like structure for my application, where a random string of digits is generated. This string is then sent to the server-side to create a private room, allowing users with the same ID to join. As a newcomer to Express.js, this is my first project utilizing it.

Below, you'll find snippets of my code from Room.ejs and the server-side.

So Here I am Linking My Modal(Which I Initially Used to Create and Join Room)

  $(document).ready(function() {
    $('#createPartyBtn').click(function () {
        $('#createJoinRoomModal').modal('show');
    });

    $('#createRoomBtn').click(function () {
        window.location.href = '/create-room';
    });

    $('#joinRoomBtn').click(function () {
        window.location.href = '/join-room';
    });
});

My Home.js File
$(document).ready(function() {

  $('#createPartyBtn').click(function() {
      $('#createJoinRoomModal').modal('show');
      $('#modalOverlay').show();
  });

  $('#createJoinRoomModal').on('hidden.bs.modal', function () {
      $('#modalOverlay').hide();
  });

  function generateRoomID() {
      return Math.random().toString(36).substr(2, 9);
  }

  $('#createRoomBtn').click(function() {
      var roomID = generateRoomID();
      window.location.href = '/room/' + roomID;
  });

  $('#joinRoomBtn').click(function() {
      var roomID = prompt('Enter Room ID:');
      if (roomID) {
          window.location.href = '/room/' + roomID;
      }
  });
});

My server.js File

const express = require("express");
const app = express();
const http = require("http").Server(app);
const path = require("path");
const io = require("socket.io")(http);

app.use(express.static("public"));
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "/src"));

app.get("/", (req, res) => {
  res.render("home");
});

app.get("/create-room", (req, res) => {
  const roomId = uuidv4(); // Generate a random room ID
  res.render("create-room", { roomId });
});


app.get("/join-room", (req, res) => {
  res.render("join-room");
});


app.post("/join", (req, res) => {
  const roomId = req.body.roomId;
  res.redirect(`/room/${roomId}`);
});

app.get("/room/:roomId", (req, res) => {
  const roomId = req.params.roomId;
  res.sendFile(__dirname + "/src/room.ejs");
});

Also Following are my Files Directories

- Node_modules
- public (Contains CSS and JS files)
- src
   |- home.ejs
   |- room.ejs
   And other EJS files
- git
- yarn.lock
- package.json
- server.js

I Tried Renaming My File From Room.ejs to Room.html But IF i use room.html It wont let me use socket io. Always show some errors. Nor It help me to link external files.

Answer 1

In your server.js file, you are sending the "room.ejs" file as a static file. This won't allow express to render it using the ejs view engine, this is why you are getting a download prompt when you hit the route. To fix it, instead of using res.sendFile(), use res.render() function as you did for the other routes. You can pass the roomId to the EJS file similar to how you passed it in app.get("/create-room")

Example:

app.get("/room/:roomId", (req, res) => {
  const roomId = req.params.roomId;
  res.render("room", { roomId });
});