'JS file doesn't load in html with node js

when i launch my node js server to open NavThor.html, this one doesn't load the map script. With the render method i change current html page but I think the problem is that my map.js cannot be load. That strange because when i tried to put the script directly into the html everything is good and run succesful. I give you the server.js map.js and the html file.

'use strict'

/* NavThor server */

let express = require('express');
let mustache = require('mustache-express');

let app = express();

/* Set up of SQLite dataBase */
let userId = require('./dataBase/loginDb')

app.engine('html', mustache());
app.set('view engine', 'html');
app.set('views', './views');
app.use(express.urlencoded({extended: false}))
app.use('/public', express.static('public'));


app.get('/', (request, response) => {
    response.render('login')
});

app.get('/register', (request, response) => {
    response.render('register')
})

app.get('/navthor', (request, response) => {
    response.render('navthor')
})


app.post('/', (request, response) => {
    let loginBtn = request.body.ID;
    let userName = request.body.username
    let password = request.body.password
    if(userId.login(userName, password))
        response.render('navthor')
    else
        response.render('login')
})

app.post('/register', (request, response) => {
    let loginBtn = request.body.ID;
    let userName = request.body.username
    let password = request.body.password
    let car = request.body.car;
    userId.createAnAccount(userName, password, car)
    response.render('navthor')
})

app.post('/navthor', (request, response) => {
    response.render('navthor')
})


app.listen(3000, () => console.log('listening on http://localhost:3000'));

``` and the html ```<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Display a map on a webpage</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
    <link href="../public/style/main_style.css" type="text/css" rel="stylesheet"/>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js" defer></script>
    <script src="server/map.js" defer></script>
</head>

<body>
    <div id="map"></div>
</body>

</html>``` 
and map script
```mapboxgl.accessToken = 'pk.eyJ1IjoibW9ycGhldXM1ODI4IiwiYSI6ImNsMHYwYnFxNDB5angzYm5tbTNwdG9oZzYifQ.jmYIPRUeR77oYFVUd9ClXg';
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions