Express: Cannot GET /texts.ejs when trying to navigate to linked html page

[twhite96]

I have a navbar in my app linking to different pages within the same app. These are all kept in my views folder in my root directory. They are all html files. However, when I run a node server and try to access another html file in the views directory linked to the index.html file, I get Cannot GET /texts.html.

I know this may seem trivial but I don't know much about Express. My code:

var express = require('express');
var app = express();
var path = require('path');
const VIEWS = path.join(__dirname, 'views');
var port = process.env.PORT || 8080;

app.set('views', VIEWS);
app.set('view engine', 'html');
app.use(express.static('public'));

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function (req, res) {
  res.sendFile('index.html', { root : VIEWS });
});


// app.get("/faq", function (req, res) {
//   res.sendFile('faq.html', { root : VIEWS });
// });
//
// app.get("/texts", function (req, res) {
//   res.sendFile('texts.html', { root : VIEWS });
// });

app.listen(port, function () {
  console.log('Example app listening on 8080!');
});

I'm not sure what is happening. I've tried all manner of versions of this. Any help would be appreciated.

[mekicha]

You need to define a route for/texts, or rather you need to uncomment it (from your code above). And from your index.htmlfile you can link to the route that serves texts.html like so:
<a href="/texts">texts</a>

[victor0801x]

as i know, here are some approaches:

1. xxx.html as static files (not using js template)
   a). using express provide static files
   just add the directory to static, app.use(express.static('path_to_your_static_file_directory'));
   then, you can get the file by hostname/path_to_your_static_file_with_its_extension
   no need to write router to get files, only need to write api to get server-side data
   b). use express response method
   write router to response user request
   js const router = express.Router(); router.get('/test', (req, res, next) => { res.sendFile('file_with_its_extension', {root: 'path_to_file_directory'}); }) app.use('/html', router);
   use hostname/html/test to get your file
2. server-side rendering,

// example, using ejs
app.set('views', path.join(__dirname, 'views')); // set views root directory, your .html
app.set('view engine', 'ejs');
app.engine('.html', require('ejs').renderFile); // register .html as an engine in express view system

app.get('/test', (req, res, next) => {
    // the same as res.render('relative_views_path_to_ejsTemplateName', {});
    res.render('relative_views_path_to_your.html', {});
});

note: the better approach 1. is using other reverse-proxy (nginx,...) to provide static sources

[twhite96]

Actually, I got it working. Wasn't specifying the route to each file. Thank you. I will close this out now.

[yangzhaopeng3]

as i know, here are some approaches:

1. xxx.html as static files (not using js template)
   a). using express provide static files
   just add the directory to static, app.use(express.static('path_to_your_static_file_directory'));
   then, you can get the file by hostname/path_to_your_static_file_with_its_extension
   no need to write router to get files, only need to write api to get server-side data
   b). use express response method
   write router to response user request

   const router = express.Router();
   router.get('/test', (req, res, next) => {
      res.sendFile('file_with_its_extension', {root: 'path_to_file_directory'});
   })
   app.use('/html', router);
   

   use hostname/html/test to get your file

2. server-side rendering,

// example, using ejs
app.set('views', path.join(__dirname, 'views')); // set views root directory, your .html
app.set('view engine', 'ejs');
app.engine('.html', require('ejs').renderFile); // register .html as an engine in express view system

app.get('/test', (req, res, next) => {
    // the same as res.render('relative_views_path_to_ejsTemplateName', {});
    res.render('relative_views_path_to_your.html', {});
});

note: the better approach 1. is using other reverse-proxy (nginx,...) to provide static sources

Great,your approaches helped me a lot!