How do I link to other pages from index.html

Glitch Help
1

How do I link to other pages from index.html

3 Likes
2

Projects in HyperDev aren’t special in any way, so you link to files like you normally would with an anchor tag. So for example in our tutorial project https://hyperdev.com/#!/project/denim-warlock in index.html you’ll see the line “<a href="/exercise1.html">”, that links to another page ‘exercise1.html’ in the same project. You can add new files to your own projects by clicking the ‘+’ sign next to ‘front-end’ in the left-hand side file menu, typing the name and hitting enter.

2 Likes
3

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');
});```
3 Likes
Getting started (HTML can't load JS, CSS or images)
4

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 :slight_smile:

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

I ran into the same problem and this Q&A helped me - thanks. I just wanted to point out that by default when you add a page using the ‘+’ sign next to ‘front-end’ in the left-hand side file menu, typing the name and hitting enter, the new page ends up under the views directory, not the public directory. So you need to add the routing to fix the “Cannot GET” error.

1 Like
6

express.static was in my server.js file by default, however I still got the GET error. What I didn’t understand was that my pages needed to be saved as public/newpage.html instead views/newpage.html. I’m used to thinking that pages go alongside wherever index.html is, and that’s not true here.

All good now tho’

7

They don’t have to be in any particular directory, they just have to be in the place you’ve configured them to be in Express. So if you’ve used app.use(express.static('public')) then they’d need to go in the public folder, but you could switch that to be views or root.

8

Thanks for the clarification Gareth.

9

Can someone explain? Simpler. I’m new to HTML

1 Like
10

If you go to the file called server.js, you will see a line of code that ends in…

app.use(express.static(‘public’));

check where you have saved the file that you wish to link to - if you used the default offered to you, then you may well have saved your file in the views folder, you will see it looks like this in the list of files in the sidenav… eg . views/cool-file

If you have saved your file in views, then you will need to alter the line of code in server.js to point to ‘views’ instead of ‘public’, so you need to alter your line of code in server.js to look like this

…
app.use(express.static(‘views’));

(notice the word in between the brackets is no longer ‘public’ instead it now reads ‘views’)

now in your html link to your file use href=“cool-file.html”

and it will work…

(the alternative is to leave the server.js code as it is - eg pointing to the public file, and then save your cool-file there instead.)

1 Like
11

Thank You For This Clarity Info.