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

forghan89 · 2019-02-15T09:38:11Z

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:

viditvarshney · 2019-02-17T16:31:19Z

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

if it doesn't work let me know

viditvarshney · 2019-02-17T16:32:11Z

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

forghan89 · 2019-02-24T14:27:30Z

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 · 2019-02-24T16:06:36Z

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

…

On Sun, Feb 24, 2019, 7:57 PM forghan89 ***@***.***> 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) ` <title>Document</title> <link rel="stylesheet" type="text/css" href="../bootstrap/bootstrap.min.css"> <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> ` — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#293 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Agk8ZY1GyXCsoIlkXmSJ3ogenHIi9Cl5ks5vQqFTgaJpZM4a9RxE> .

Anas-jaf · 2020-10-31T00:47:54Z

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 · 2021-07-26T15:44:21Z

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 · 2022-08-05T03:45:32Z

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 · 2023-01-02T02:24:54Z

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 · 2023-10-15T04:55:58Z

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

zinthose · 2024-10-24T13:40:47Z

This is one of those "it's a feature, not a bug" scenarios.

I needed a means to run a dev set of files while still being able to use some of the resources in root while using the CSS files in dev.

This allows me to use "css/styles.css" from "./dev/index.html" and not from ".dist/css/styles.css"

It's a hack, but it works for my needs.

{
    "liveServer.settings.root": "/dist",
    "liveServer.settings.mount": [
        ["/", "./"], // Needed to ensure relative paths to subfolders work in /dev
        ["/dev", "./dev"],
        ["/dev/images", "./dist/images"],
    ],
}

kxrur mentioned this issue Feb 16, 2024

[Bug] can't handle relative path properly barrett-ruth/live-server.nvim#3

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

forghan89 commented Feb 15, 2019 •

edited

Loading

viditvarshney commented Feb 17, 2019

viditvarshney commented Feb 17, 2019

forghan89 commented Feb 24, 2019 •

edited

Loading

viditvarshney commented Feb 24, 2019 via email

Anas-jaf commented Oct 31, 2020

aderchox commented Jul 26, 2021 •

edited

Loading

VladdyHell commented Aug 5, 2022

Arnold6666 commented Jan 2, 2023

phuxuan2k3 commented Oct 15, 2023

zinthose commented Oct 24, 2024

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

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

Comments

forghan89 commented Feb 15, 2019 • edited Loading

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

viditvarshney commented Feb 17, 2019

viditvarshney commented Feb 17, 2019

forghan89 commented Feb 24, 2019 • edited Loading

viditvarshney commented Feb 24, 2019 via email

Anas-jaf commented Oct 31, 2020

aderchox commented Jul 26, 2021 • edited Loading

VladdyHell commented Aug 5, 2022

Arnold6666 commented Jan 2, 2023

phuxuan2k3 commented Oct 15, 2023

zinthose commented Oct 24, 2024

forghan89 commented Feb 15, 2019 •

edited

Loading

forghan89 commented Feb 24, 2019 •

edited

Loading

aderchox commented Jul 26, 2021 •

edited

Loading