search

ritwickdey / vscode-live-server

Launch a development local Server with live reload feature for static & dynamic pages.
https://ritwickdey.github.io/vscode-live-server
MIT License
5.66k stars 1.23k forks source link

live server doesn't work in relative file paths #293

Open forghan89 opened 5 years ago

forghan89 commented 5 years ago

vscode-live-server doesn't work in html when add css or js relative file paths such as:

<link rel="stylesheet" href="../bootstrap/bootstrap.min.css">

my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
</head>
<body>

    <h1>Heading</h1>

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
</body>
</html>

result:

liveserver

viditvarshney commented 5 years ago

Just specify the type of file , Sometimes it happens type="text/css"

if it doesn't work let me know

viditvarshney commented 5 years ago

@forghan89 It is working absolutely fine check your css file Live server works with relative path

forghan89 commented 5 years ago

Just specify the type of file , Sometimes it happens type="text/css"

if it doesn't work let me know

I add type="text/css" to my code But did not work: (This bug might be related to VScode)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="../bootstrap/bootstrap.min.css">
</head>
<body>

    <h1>Heading</h1>

    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
</body>
</html>
viditvarshney commented 5 years ago

i think the problem is with your link address give your file structure

vidit

On Sun, Feb 24, 2019, 7:57 PM forghan89 notifications@github.com wrote:

Just specify the type of file , Sometimes it happens type="text/css"

if it doesn't work let me know

I add type="text/css" to my code But But did not work: (This bug might be related to VScode)

`

Document

Heading

`

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ritwickdey/vscode-live-server/issues/293#issuecomment-466781918, or mute the thread https://github.com/notifications/unsubscribe-auth/Agk8ZY1GyXCsoIlkXmSJ3ogenHIi9Cl5ks5vQqFTgaJpZM4a9RxE .

Anas-jaf commented 3 years ago

i countered the same problem and the reason is that liveserver does not open js and css files so you need to download liveserver extention then it will work perfect

aderchox commented 3 years ago

I encountered the same problem and it doesn't work with the type="text/css" as well. E.g., https://127.0.0.1:5500/temp.css is served where https://127.0.0.1:5500/../temp.css must be served. Actually this seems to be "the expected" and "fine" behavior, because (if I'm not wrong) a web server must not serve files outside its web root(the path at which it started serving files).

So for instance, let's say we have such a structure:

/parent
    style1.css
    /project
        index.html
        /assets
            /stylesheets
                style2.css
            /fonts
                roboto.woff

assuming we are in the "/project", it will be our current path, and when we start the live server there, it (our current path, i.e., the "/project") will become our "web root", denoted by a slash ( / ) after the IP address. Now if we try to add the roboto font in style2.css, it would be possible using a relative path like this: url(../fonts/roboto.woff), and it works because it is still completely INSIDE the web root space. But a relative path won't work if tries to access a file outside the web root space, for example, if index.html tries to link to the stylesheet style1.css, it will fail, because it is above (outside of) the realm of the served web root(i.e., the / which in example above is the /project directory). Hope it helps.

VladdyHell commented 2 years ago

I just recently solved this issue, I found out that whenever you use relative paths in an HTML file or any other files, it uses the very root of your directory of your computer as I saw in the source code of the HTML, I used live-server via CLI, but try this in your VSCode settings if it works:

{
    "liveServer.settings.mount": [
        ["/"],
    ]
}

I don't know the exact settings for this since I don't use VSCode, I just researched the settings for the live-server for VSCode.

As long as the root is mounted, relative paths will work.

Arnold6666 commented 1 year ago

I just recently solved this issue, I found out that whenever you use relative paths in an HTML file or any other files, it uses the very root of your directory of your computer as I saw in the source code of the HTML, I used live-server via CLI, but try this in your VSCode settings if it works:

{
    "liveServer.settings.mount": [
        ["/"],
    ]
}

I don't know the exact settings for this since I don't use VSCode, I just researched the settings for the live-server for VSCode.

As long as the root is mounted, relative paths will work.

Thanks a lot. I had the same problem when i added js relative path

phuxuan2k3 commented 11 months ago

I encountered the same problem and it doesn't work with the type="text/css" as well. E.g., https://127.0.0.1:5500/temp.css is served where https://127.0.0.1:5500/../temp.css must be served. Actually this seems to be "the expected" and "fine" behavior, because (if I'm not wrong) a web server must not serve files outside its web root(the path at which it started serving files).

So for instance, let's say we have such a structure:

/parent
    style1.css
    /project
        index.html
        /assets
            /stylesheets
                style2.css
            /fonts
                roboto.woff

assuming we are in the "/project", it will be our current path, and when we start the live server there, it (our current path, i.e., the "/project") will become our "web root", denoted by a slash ( / ) after the IP address. Now if we try to add the roboto font in style2.css, it would be possible using a relative path like this: url(../fonts/roboto.woff), and it works because it is still completely INSIDE the web root space. But a relative path won't work if tries to access a file outside the web root space, for example, if index.html tries to link to the stylesheet style1.css, it will fail, because it is above (outside of) the realm of the served web root(i.e., the / which in example above is the /project directory). Hope it helps.

I encountered the same problem and it doesn't work with the type="text/css" as well. E.g., https://127.0.0.1:5500/temp.css is served where https://127.0.0.1:5500/../temp.css must be served. Actually this seems to be "the expected" and "fine" behavior, because (if I'm not wrong) a web server must not serve files outside its web root(the path at which it started serving files).

So for instance, let's say we have such a structure:

/parent
    style1.css
    /project
        index.html
        /assets
            /stylesheets
                style2.css
            /fonts
                roboto.woff

assuming we are in the "/project", it will be our current path, and when we start the live server there, it (our current path, i.e., the "/project") will become our "web root", denoted by a slash ( / ) after the IP address. Now if we try to add the roboto font in style2.css, it would be possible using a relative path like this: url(../fonts/roboto.woff), and it works because it is still completely INSIDE the web root space. But a relative path won't work if tries to access a file outside the web root space, for example, if index.html tries to link to the stylesheet style1.css, it will fail, because it is above (outside of) the realm of the served web root(i.e., the / which in example above is the /project directory). Hope it helps.

thank you, it help me alot