CSS and JS won't load even when in same directory as index.php

Question

I feel like I must be missing something very obvious, because I've never had this happen before!

I'm running a local PHP server running the following command:

php -S localhost:8888 index.php

When I go to the URL, the HTML and all the php code run just fine.

However, whenever I add a script tag to add JS in the header, I recieve the following error:

Uncaught SyntaxError: Unexcepted token <

And when I attempt to add a CSS file I get this error:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8888/assets/style.css".

No matter whether I try and include the header by using PHP include:

<?php include("../includes/layouts/header.php"); ?>

Or directly adding a header and these imports in index.php, I always receive these errors.

My hunch was it was an issue with the directory tree. But I've even placed the CSS and JS files in the same directory as index.php and have added the header code to index.php, yet I still get these errors.

Header code

<!DOCTYPE html Public "HTML TEMPLATE">
<html lang="en">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="style.css" media="all" title="no title" type="text/css" charset="utf-8">
    <script src="script.js"></script>
</head>
<body>
<div id="header">
    <h1>Header</h1>
</div>

script.js:

$( document ).ready(function() {
    console.log( "ready!" );
});

Console log of errors:

Adding an image of my current project structure:

You should use relative urls from the document root by adding / in front of the URL: href="/path-from-doc-root/style.css" and src="/path-from-doc-root/script.js" etc. That way, all links and references will work no matter what URL they are under. If that doesn't work, show us your file/folder structure. — M. Eriksson
– M. Eriksson, Commented Oct 12, 2018 at 5:13
I've added the JS code, and an image of my current project structure. — Alkarin
– Alkarin, Commented Oct 12, 2018 at 5:22
add <script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/…> before script tag script,js — markantonay
– markantonay, Commented Oct 12, 2018 at 5:23
I previously had a script to include jquery. However even with an empty JS file, I'm still getting the exact same error on script.js:3 — Alkarin
– Alkarin, Commented Oct 12, 2018 at 5:25

Bilal Ahmed · Accepted Answer · 2018-10-12 05:24:28Z

1

you should used / at the start of the path. as per your update question your path become /public/assets/style.css. but again i recommend you should used best way

link rel="stylesheet" href="/public/assets/style.css" media="all" title="no title" type="text/css" charset="utf-8">
    <script src="/public/assets/script.js"></script>

Some more information about absolute path and relative path

If the path is built starting from the system root, it is called absolute.
If the path is built starting from the current location, it is called relative

The best way: you should create base url like in config.php file

define('BASE_URL', 'http://example.com');

and you can used like this

<?php
    include('config.php');
?>

<link rel="stylesheet" href="<?php echo BASE_URL; ?>/styles.css" />

edited Oct 12, 2018 at 5:24

answered Oct 12, 2018 at 5:16

Bilal Ahmed

4,0663 gold badges25 silver badges42 bronze badges

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

4 Comments

Alkarin Over a year ago

Hey Bilal. I'd updated the paths in index.php to /public/assets/style.css and /public/assets/script.js, yet the issue persists.

msg Over a year ago

@Alkarin you are running the server from public/, right ? Then public is your /, remove it from the path

Alkarin Over a year ago

@msg I am in the public directory when I start the php server, correct. Setting the paths to /assets/filename still gets me the same errors.

Alkarin Over a year ago

@BilalAhmed there is already a screenshot of the console errors in the main post. Still getting the exact same errors, same lines and all.

Collectives™ on Stack Overflow

CSS and JS won't load even when in same directory as index.php

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related