Express route '/' isn't logging my console.log()

Code Help Node JS
1

I have the following code:

app.get('/', (req, res) => {
  console.log('pagina inicial acessada')
  res.sendFile(path.join(__dirname + '/site/index.html'))
})

And I want to know why the res.sendFile() works, but the console.log('') doesn’t
(I’m using the package express vs4.18.2 )

2

Could you please share your entire code? Based on the information provided, my only assumption is that you might have used app.use(app.static("[SOME DIR]")) somewhere else in your code, and that particular directory includes an index.html file. This file takes precedence over your / route, resulting in unexpected behavior.

3 Likes
3

here is the entire code:

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

app.use(express.static('./site'))
app.use(express.static('./site/produtos/'))

app.get('/', (req, res) => {
  console.log('pagina inicial acessada')
  res.sendFile(path.join(__dirname + '/site/index.html'))
});

app.get('/produto1', (req, res) => {
  res.sendFile(path.join(__dirname + '/site/produtos/produto1/produto.html'))
  console.log('página do produto 1 acessada')
})
app.get('/produto2', (req, res) => {
  res.sendFile(path.join(__dirname + '/site/produtos/produto2/produto.html'))
  console.log('página do produto 2 acessada')
})


app.listen(3000, () => {
  console.log('server started');
});

And if u cold explain better the following mention, i’m gonna be grateful! (sorry bad english)

This file takes precedence over your / route, resulting in unexpected behavior.

4

So because of this, it finds the index.html file and links it to /, so your route is ignored. I think you just need to delete these two lines of code:

And I don’t think it will ever reach these console.logs:

A link to your Repl will be helpful

3 Likes
5

removing both app.use() really solved the problem with console.log(), but now the pages off my site can’t use external .js and .css files. What to do?

And here is the link to my repl

6

Okay, that’s why I needed the link to your Repl, to see your file structure.

So I’d recommend restructuring your Repl to something like this:

express
├── index.js
├── public
│   ├── css
│   │   ├── style.css
│   │   │   └── produtos
│   │   │       ├── produto1.css
│   │   │       └── produto2.css
│   ├── imgs
│   │   └── img.jpg
│   └── js
│       └── cliques.js
└── views
    ├── index.html
    └── produtos
        ├── produto1.html
        └── produto2.html

And change your index.js code to this:

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

app.use(express.static('/public'));

app.get('/', (req, res) => {
  console.log('pagina inicial acessada');
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

app.get('/produto1', (req, res) => {
  console.log('página do produto 1 acessada');
  res.sendFile(path.join(__dirname + '/views/produtos/produto1.html'));
});
app.get('/produto2', (req, res) => {
  console.log('página do produto 2 acessada');
  res.sendFile(path.join(__dirname + '/views/produtos/produto2.html'));
});

app.listen(3000, () => {
  console.log('server started');
});

views/index.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta lang="pt-br">
  <title>loja</title>
  <link href="/css/style.css" rel="stylesheet" type="text/css" />
  <script src="/js/cliques.js" defer></script>
</head>

views/produtos/produto1.html

<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">
  <meta lang="pt-br">
  <title>Document</title>
  <link rel="stylesheet" href="/css/style.css" type="text/css"/>
</head>

views/produtos/produto2.html

<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">
  <meta lang="pt-br">
  <title>Document</title>
  <link rel="stylesheet" href="/css/style.css" type="text/css"/>
</head>
4 Likes
7

@QwertyQwerty88 you have already used

app.use(express.static('/public'));

though, which hosts the entire public folder.

1 Like
8

I appreciate your suggestion, but I’ll stay with my current folder template.

And about this:

but now the pages off my site can’t use external .js and .css files. What to do?

I solved it putting the app.use() before the server.listen(port, function)

9

Can i use the images from /image in /produtos/... if i use this file structure?

10

Ok so the reason the file structure is like that is so the HTML can be separated from static files (css, js, and images). There’s no point in using something similar to that if you put the images inside of /view

2 Likes
11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.