How can I load css or js file in codeigniter 4?

Question

When I am trying to load css or javascript file then it returns 404 error.

I've tried to use helpers such as HTML helper's link_tag, URL helper's base_url methods, it will make a route to the file, but not loadable.

This is my Controller:

class Pages extends Controller{

    public function viewPage($page)
    {
        if(!is_file(APPPATH."/views/pages/$page.php")){
            throw new \CodeIgniter\Exceptions\PageNotFoundException($page);
        }

        helper('html');

        $data['title'] = $page == 'noticeboard' ? "page1" : "page2";

        if($page != "index"){
            echo view('templates/header', $data);
        }

        echo view("pages/$page", $data);

        if($page != "index"){
            echo view("templates/footer", $data);
        }
    }

}

My Router:

$routes->get("/", "Pages::viewPage/index");

Header in HTML:

<?=link_tag('public/css/style.css')?>

The assets folder is located in the very root of htdocs(I'm using xampp apache server).

And when I try to load CSS or JS, I get this error:

I'm completely new to CodeIgniter, so any bits of help would be appreciated.

Directory structure:

htdocs
  -public
    --CSS
     ---style.css
    --JS
     ---app.js
  -app
    --controllers
      ---Page.php
    --views
      ---pages
        ----index.php

* I've changed my CSS, JS file routes from assets to public *

Please show us your folder structure then only we can tell you the accurate solution — bhuvnesh pattnaik
– bhuvnesh pattnaik, Commented Oct 15, 2019 at 10:45
@bhuvneshpattnaik Added. Application folder has changed the name into 'app' since CodeIgniter 4. — YJM
– YJM, Commented Oct 15, 2019 at 11:35
try replacing public/css/style.css to /css/style.css in the line <?=link_tag('public/css/style.css')?> — bhuvnesh pattnaik
– bhuvnesh pattnaik, Commented Oct 15, 2019 at 11:43

bhuvnesh pattnaik · Accepted Answer · 2019-10-15 11:49:41Z

9

As app is sibling folder of public folder,

And as per codeIgniter 4 .

anything you put in public folder can be accessed directly.

so it should be something like below to get css applied to the view.

In views folder lets say there's a file as index.php

then code should be like below:

index.php

    <link rel="shortcut icon" type="image/png" href="/css/style.css"/>

answered Oct 15, 2019 at 11:49

bhuvnesh pattnaik

1,49310 silver badges14 bronze badges

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

2 Comments

user2345998 Over a year ago

If you want to protect your source files from access from outside, you should not put them in the public directory. See details here: stackoverflow.com/questions/19820314/…

Dr3am3rz Over a year ago

@bhuvnesh pattnaik I am also having the same issue. Apparently I tried to create assets folder which is same level as app folder and also tried putting the css file in the public folder, it is still showing file not found error.

score 3 · Accepted Answer · 2019-10-15 10:16:01Z

3

Try this

$config['base_url'] = "http://ur_site_url.com/";

Than in your view

<?php echo base_url('assets/css/style.css'); ?>

edited Oct 15, 2019 at 10:16

answered Oct 15, 2019 at 9:59

user11988937

3 Comments

YJM Over a year ago

What do you mean 'after that'?

user11988937 Over a year ago

I mean configure your settings and then in main view use base_url()

billywafuu Over a year ago

This answer is for CodeIgniter 3 not CodeIgniter 4 as CI4 does not use configuration arrays anymore.

RIZI · Accepted Answer · 2021-06-19 06:01:15Z

2

GOTO config/App.php and change this variable

public $baseURL = 'http://yoursite';

then you can access it as

<?php echo base_url();?>

answered Jun 19, 2021 at 6:01

RIZI

1241 silver badge7 bronze badges

Comments

mdgeus · Accepted Answer · 2021-11-01 19:27:12Z

2

You can also use the html helper and add the stylesheet with link_tag depending on your setup and if you hide the public folder in your url, you must add public to the url.

<?php echo link_tag('public/css/style.css'); ?>

answered Nov 1, 2021 at 19:27

mdgeus

3722 silver badges8 bronze badges

Comments

Nims Patel · Accepted Answer · 2019-10-15 10:57:26Z

0

Did you add base_url in the application/config/config.php file? Here: http://prntscr.com/pji8a5

Site URL is not defined which you give.

You have given http://localhost:8080/css.....

But It should http://localhost:8080/SITE_URL/css.....

If you add $config['base_url'] = "http://site_url.com/"; then you can give direct base_url('assets/css/style.css');

<link rel="stylesheet" href="<?php echo base_url('assets/css/style.css'); ?>">
<script src="<?php echo base_url('assets/js/js.css'); ?>"></script>

Thanks

edited Oct 15, 2019 at 10:57

answered Oct 15, 2019 at 10:45

Nims Patel

1,0569 silver badges19 bronze badges

3 Comments

YJM Over a year ago

I've changed base_url like this: public $baseURL = 'http://localhost'; (I think it's different because this is codeigniter 4. I didn't had application folder at all), but the error is not fixed.

Nims Patel Over a year ago

What is your project folder name? You should give $baseURL = 'http://localhost/project_name'; @YJM

Enoch Over a year ago

That's CI3 not CI4. CI4 no longer uses $config[] array like that

quantme · Accepted Answer · 2024-05-09 22:02:09Z

0

I had the same issue running CI4 and trying to load css files while developing on localhost.

Before:

    <link href="<?= base_url('css/main.css'); ?>" rel="stylesheet" type="text/css">
    //                        ^ Moved from here...

After:

    <link href="<?= base_url(); ?>css/main.css" rel="stylesheet" type="text/css">
    //                            ^ ..to here.

Sincerely don't know the difference; could be a very technical difference between my localhost and hosting server, but when it worked, I stopped to do research about it.

Note: After the change worked I tried to recreate the issue but disappeared! So I reversed to the proposed solution.

I hope it helps.

answered May 9, 2024 at 22:02

quantme

3,6554 gold badges38 silver badges50 bronze badges

Collectives™ on Stack Overflow

How can I load css or js file in codeigniter 4?

6 Answers 6

2 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related