0

sorry for the newbie question, but I started my programming adventure two months ago. I have a doubt: a client commissioned me to demo a website (so it would only work offline) and I am making the design. Many pieces are reusable, so I have created elements via javascript to be called in the code. The problem is that while if I start the page from the VS Code live server everything loads fine, while if I in the folder statically open an html file neither the CSS nor the JS loads. I think it is a problem with how they are linked. My idea was to deliver a folder with all the files and I imagined that he clicking would be able to see all the components and navigate through the pages. Any solutions?

Here's an example on how I linked those JS files (it works on live server)

<script src="/components/card.js" type="text/javascript"></script>
Improve this question
2
  • Do you have file in local in the correct path? Commented Aug 3, 2022 at 7:57
  • "I imagined that he clicking would be able to see all the components and navigate through the pages" - does he ( your client ) have a webserver setup? Has he copied your files to the correct locations in said webserver (if it exists) in order that the paths in your code will exist? Or do you hope that he will be able to run the code using the filesystem rather than proper urls? Commented Aug 3, 2022 at 8:02

1 Answer 1

Reset to default
0

URLs starting with a single / are absolute paths.

They are calculated by taking the current URL and completely replacing the path.

If you start with http://localhost/index.html then you get http://localhost/components/card.js. Your HTTP server will then resolve that to something like: /home/user/work/project/components/card.js and all is good.

If you start with file:///home/user/work/project/index.html then you get file:///components/card.js … which is wrong.

There are a couple of approaches you can take with this.

My preferred one is to treat websites as things that should be accessed over HTTP. There are lots of restrictions if you don't use HTTP, and these kinds of URLs just break. The simple solution is to use a web server.

Another approach is to use relative paths, in which case you need to be explicit about where you link to in terms of directories.

Going from $PROJECT/index.html to $PROJECT/components/card.js needs you to link to components/card.js but going from $PROJECT/example/index.html to $PROJECT/components/card.js needs you to link to ../components/card.js. It's a lot harder to maintain.

My idea was to deliver a folder with all the files and I imagined that he clicking would be able to see all the components and navigate through the pages.

How you deliver to a client will depend on what you negotiate with them.

In very broad terms, however, they are either going to be non-technical (in which case you should deliver them a URL and be responsible to organising the hosting of the final site) or technical (in which case they should be able to handle an instruction to test the code on a web server).

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you a lot! I have to be honest: I was already trying this solution but it didn't seem to work. Your solution, however, made me persist and after restarting the pc everything worked Thank you again, I can finally move on!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.