Getting started (HTML can't load JS, CSS or images)

[Jeach]

I created a basic HTML file which loads successfully. But for some reason, no JS, CSS or images will load (HTTP 404).

When I look in the Chrome Network tab, I can see the link is ok (ie: “glitch.me/date.js”). The ‘date.js’ file is also in the root of my app folder and the HTML has: .

All my other JavaScript files, CSS and date are the same.

Why doesn’t anything load? Can’t figure it out.

[Gareth]

Please share the project name so we can take a look. Thanks!

[Jeach]

I cloned the project and stripped it of some sensitive information which I don’t want exposed at this time.

The project can be found here: https://test-22.glitch.me/form/1

The ‘/form/1’ is simply a specification that I must adhere to which is to feed the HTML page via a REST API. As you can see the file is loaded and displayed correctly. But doing F12 in Chrome, the Network tab indicates that all dependent resources (javascript libs) won’t load (HTTP 404).

I tried with an absolute path ‘/date.js’, relational ‘date.js’ and what I was initially trying ‘js/date.js’ (in a folder). But nothing works.

This is my first few days on glitch (having many problems, not too impressed) and just basic knowledge of Node.js with limited experience. I’m assuming all files in the root are served directly from your servers?

Thanks for your help.

[Jeach]

Found these two bits of information which seems like what I was looking for:

How do I link to other pages from index.html

I tried that but continue to receive the following Cannot GET /NewPage.html error. Is there anything else that needs to be configured? I have tried href="/views/NewPage.html", href="/NewPage.html" etc. (Yes the html page is created in the project) Resolved You need to add routing response.sendFile(__dirname + '/views/NewPage.html'); });```

How do I link to other pages from index.html

If the pages are under public/NewPage.html and you have express serving static assets with app.use(express.static('public')); then it should “just work”. If your pages are in views or another directory then you’ll need to explicitly create routes for them. I hope this clears it up

Will be trying them to see if it works. Although exposing a ‘public’ folder (or a ‘js’, ‘css’ and ‘images’ would be preferred) over adding routing maps in Node.js.

Now I just have to figure out why when I copy files in the Console it never shows up in my project. Same goes with creating directories, etc.

[Tim]

You can run the refresh command in the console after making changes to get the changes to show up in the editor.

[Gareth]

With your current setup, your jQuery files should be in a directory called ‘public’ e.g. public/jquery…

We recommend using the editor directly to create files. The console and editor file tree don’t automatically sync. Use the command ‘refresh’ to get the file tree editor to show updates made with the console.

[Jeach]

Oh my god! Thanks, the ‘refresh’ command works. I was going absolutely crazy trying to do things and never showing up in my browser.

I wish they would add a few instructions in ‘motd’ to help us out.

[Jeach]

Thank you Gareth and Tim for the information about adding public mapping via express.

Issues solved, moving ahead with my project.