Server issues causing Laravel 6 CSS and JS to fail loading

I compressed my project folder and uploaded it to the Document Root for the subdomain. All of my CSS and JS files are located inside the Public folder. The project works perfectly fine on XAMPP, but when I transfer it to my shared hosting, the CSS and JS files do not load. Clicking on the URLs generated for the CSS and JS from the View Page Source, I am getting a 404 Not Found error.

Checking the Console tab in the Inspect Element tool, I am seeing a 

Failed to load resource: the server responded with a status of 404 (Not Found)
error. However, I have verified that the files exist in the same folders as they did when the project was working locally on XAMPP.

The method I used to link my CSS files is as follows:

<link rel="stylesheet" href="<?php echo asset('public/vendor/bootstrap/css/bootstrap.min.css') ?>" type="text/css">

The PHP version on my server is 7.3.23 and the version of Laravel I am using is 6.18.42.

javascriptcsslaravellaravel-6

Answer №1

Verify the APP_URL value in the .env file. Ensure that it is accurate and not set to "localhost".

You could attempt this solution (although it may not be a definitive fix, it can improve the appearance):

<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

Answer №2

To achieve this, follow the steps below:

1) Configure your APP_ASSET URL by setting ASSET_URL=http://localhost:8000/public in the env file.

2) Ensure that the HTML tag is set like this <link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}"rel="stylesheet">

Answer №3

Step 1: Define the ASSET_URL in your environment file by setting it to ASSET_URL=http://localhost:8000/public.

Personally, I found success with this solution by ensuring that I included the full site name with https.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Querying a Database to Toggle a Boolean Value with Jquery, Ajax, and Laravel 5.4

I am facing an issue with a button I created to approve a row in a table. It seems that everything is working fine when clicking the button, but there is no change happening in the MySQL database Boolean column. Here is the code for my button: <td> ...

javascriptphpjqueryajaxlaravel-5.4

Best practices for building an Ember frontend and Node backend application

I'm currently working on a project that involves an ember frontend and a node backend. Within my ember-cli app, I've configured the .ember-cli file to proxy requests to node like this: { "proxy": "http://localhost:3000" } I've had to es ...

javascriptajaxnode.jsember.jsproxy

"Implementing interactive arrow buttons in a horizontal navigation bar using HTML, CSS, and JavaScript

Seeking advice on creating a horizontal navigation bar with arrow buttons at the sides, such as the one shown below. Despite extensive research, I have not found the exact solution I am looking for. This will be implemented in my Vue.js project. |<| P ...

javascripthtmlcssvue.jsuser-interface

Tips for Choosing a Tab in angular-ui: AngularJS

Is there a way to select the last tab without using ng-repeat? I want to avoid using ng-repeat but still need to select tabs. Any suggestions? If you'd like to see the code in action, you can visit: http://plnkr.co/edit/ZJNaAVDBrbr1JjooVMFj?p=preview ...

javascriptangularjsangular-ui

Select a random option from the dropdown menu

I have the following script: <script> function $(id) { return document.getElementById(id); } function getImage() { $('loader').src='/misc/images/loading.gif'; var url = "http://mouse ...

javascript

Arrange Data Alphabetically using a JavaScript Loop

I have a unique program that extracts data from 2 different URLs. Using CSS, I automatically generate a sleek Business Card design in a 'for' loop. Now, I'm faced with the challenge of creating a Sort Alphabetical button based on "${users[co ...

javascriptarraysjsonsorting

Looking to Identify a Click Within a Complicated Component and Retrieve the Component's ID

Currently, I am working with React for development and have a need to capture clicks at the topmost parent level for performance reasons. const clickHandler = (e) => { console.log("clickHandler", e.target) --> I want to identify the child ...

javascripthtmlreactjs

Separate the JSON array according to the type of suggestion it's being given

My JSON array is structured like this: [ { "characterID": 0, "description": "Series 1", "id": 1, "seriesID": 0, "status": "ACCEPTED", "type": "SE ...

javascriptjsonvue.js

Can you tell me how to display the currently utilized Node.js version and path within npm?

I’m encountering a similar issue to the one discussed in this Stackoverflow thread: SyntaxError: Use of const in strict mode?. However, my problem arises when attempting to install Flux. I followed the steps outlined in the linked Stackoverflow question ...

javascriptnode.jsbashubuntu

Tips on how to decorate a radio button using borders and colors

How can I change the color of my radio button and its border color? I attempted to modify the code below, but it is not producing the desired result. li.payment_method_bacs input[type='radio']:checked:before { background: black !important ...

htmlcss

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

cssreactjscreate-react-appyarnpkg

Combine both typescript and javascript files within a single Angular project

Is it feasible to include both TypeScript and JavaScript files within the same Angular project? I am working on a significant Angular project and considering migrating it to TypeScript without having to rename all files to .ts and address any resulting er ...

javascriptangularjstypescript

Return to the previous page with different query parameters, not the same one

When it comes to reverting state location back by 1 step in Angular, we can utilize something along the lines of this.location.back();. This method works well unless the system redirects to the same URL but with different query parameters. In such cases, ...

javascriptangulartypescript

Tips for creating a functional null option using the select ng-options feature

While there are a few questions and answers on this topic, I have yet to find a solution that works for my specific case. Imagine having an object like this: $scope.person = {name: 'Peter', category1: null, category2: null}; Another variable r ...

javascriptangularjsangularjs-ng-options

Why does this function properly on every browser except for Opera?

I have implemented a script that allows me to replace the standard file upload input with a custom image. The script also ensures that an invisible 'browse' button appears underneath the mouse pointer whenever it hovers over the custom image. Thi ...

javascripthtmlcssfile-uploadopera

Step-by-step guide: Creating a captivating triangular shape on the current tab

I am trying to implement a dynamic tab using Bootstrap where clicking on a tab will display a thicker black underline, like in this image: https://i.stack.imgur.com/h48GB.png To achieve the black line effect, I have added the following code: .nav-tabs.n ...

htmlcsstabshoverselected

Firebase Authentication error code "auth/invalid-email" occurs when the email address provided is not in a valid format, triggering the message "The email address is

Currently, I am working on integrating Firebase login and registration functionality into my Angular and Ionic 4 application. Registration of user accounts and password retrieval are functioning properly as I can see the accounts in my Firebase console. Ho ...

javascriptangularfirebaseionic-frameworkfirebase-authentication

Aligning a 900px wide element with an orange background on the left and a white background on the right

I have a section on my website that I want to position in the center of the screen. It's a simple task, but I have a specific design in mind. I want the left side of the section to have an orange background, while the right side should be white. I&apo ...

htmlcsscolorsbackgroundposition

How to center a Bootstrap 4 navbar with brand and links in the middle

I'm facing some difficulty in centering the navigation bar of my website, including the brand and the links. Since I am more focused on backend development, I'm struggling with the frontend aspect of this. Code <script src="https://ajax.go ...

htmlcssbootstrap-4

What could be the reason a normalMap fails to render accurately while utilizing THREE.SubdivisionModifier?

When attempting to render a 'soft' cube with a normal map, I encountered an issue. Despite not receiving any errors or warnings while running the code, adding the normal map parameter resulted in a black object when refreshing the browser. Removi ...

javascriptthree.js