GET http://localhost:3000/public/js/test.js net::ERR_ABORTED 404 (Not Found)

Question

I tried to connect sign_up.liquid with test.js. But I have the error 404.

I think my path to connect this two files are correct:

  <script src="../../public/js/test.js"> </script>
  <form id="formSignUp" method="POST" onsubmit="return main()">
    <h1>Inscription</h1>
    <input type="text" id="form_input_name" name="name" placeholder="Prénom" size= "30">
    <input type="text" id="form_input_surname" name="surname" placeholder="Nom" size= "30">
    <input type="text" id="form_input_mail" name="mail" placeholder="E-mail" size= "30">
    <input type="password" id="form_input_password" name="password" placeholder="Mot de passe" size= "30">
    <input type="password" id="form_input_conf_password" name="conf_password" placeholder="Confirmation de mot de passe" size= "30">

    <div id="div_checkNewsletter">
        <input type="hidden" name="newsletter" value="0">
        <input type="checkbox" id="box_newsletter" name="newsletter" value="1">
        <label for="newsletter">En cochant cette case, j’accepte de recevoir <br>les actualités d’Otablo.</label>
    </div>

    <button type="submit" id="button_orange_center"> Suivant</button>
</form>

And my server.js make a way to send my static files to the client:

const express = require('express')
const app = express()
const path = require('path')
const bodyParser = require('body-parser')
const http = require('http').createServer(app)

// Liqui Param
const { Liquid } = require('liquidjs')
const engine = new Liquid({
  root: ['./views', './views/partials', './views/layouts']
})

const HTML_DIR = path.join(__dirname, '/public/')
app.use(express.static(HTML_DIR))

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

I don't understand why sign_up.liquid and test.js are not linked.

Answer 1

I think my path to connect this two files are correct

It isn't.

The path is what you specify in your server.js file and not on your computers file system.

You said:

const HTML_DIR = path.join(__dirname, '/public/')
app.use(express.static(HTML_DIR))

… so everything in /public/ gets mapped to URLs under /.

That means the path is:

src="/js/test.js"