I have a spring boot application that contains static resources in the structure indicated below ( + indicates directories, - indicates files)
+ my-app
+ src
+ resources
+ static
+ v1
+ css
- app.css
- main.js
- index.html
I have sub-directory that contains the application bundles. By default, Spring looks for index.html directly under resources/static directory. It does not find one in this case.
My index.html looks something like this
<html>
<head>
<script type="text/javascript" src="main.js"></script>
<link type="text/css" href="css/app.css"/>
</head>
<body>
</body>
</html>
Let us assume the application is hosted at http://myapp.com.
I have two questions here
How can I make Spring to look for v1/index.html under my static resources, when I access the application the URL http://myapp.com?
If I load v1/index.htmlby adding a view controller in ViewControllerRegistry, it does load index.html under v1 directory, but gives 404 on all the resources used by index.html (main.js & css/app.css).
How can I tell Spring to get all resources from resources/static/v1, instead of resources/static.
I created a basic Spring Boot Project in STS and did not any dependencies. I used your html sample from above and modified it to this:
<html>
<head>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" type="text/css" href="/v1/css/app.css"/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
I created the directory /src/resources/static/v1 and /src/resources/static/v1/css, placing the index.html file in the ../v1 directory which worked. The app.css file contained the following for testing purposes:
h1 {
color:red;
}
This worked without any configuration changes to Spring. If you are using Thymeleaf, JTwig, JSP... you may need to add resource handlers or tweak settings for those template engines, I can't comment since I didn't use a template engine based on your example. Anything in the /static directory will be referenced without the /static.
I hope that helps, if it does please mark the answer as the right answer.
Related
In my source code of Blade file of CSS include URL is like below
<link rel="stylesheet" href="{{ asset('frontend/css/bootstrap.min.css') }}" type="text/css">
But I am getting below URL in page source of browser
<link rel="stylesheet" href="http://127.0.0.1:8000/public/frontend/css/bootstrap.min.css" type="text/css">
Why I am getting this ? How can I remove public from the URL ?
You're getting public in the path because you're accessing your site the same way http://127.0.0.1:8000/public/.
You need to change how your server serves the application.
asset() function points to the public folder. For your css file to work make a 'frontend' folder in the public directory
I have a vue application, I install firebase tools and upload the application to firebase hosting, the first time all done and I make npm run build and firebase deploy, but when I realise any change, and later do npm run serve or build or firebase deploy I have the next error:
Template execution failed: ReferenceError: features is not defined
ReferenceError: features is not defined
- index.html:4 eval
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:4:10
- index.html:7 module.exports
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:7:3
- index.js:284 Promise.resolve.then
[real]/[html-webpack-plugin]/index.js:284:18
- next_tick.js:188 process._tickCallback
internal/process/next_tick.js:188:7
Any idea? I don't know why this problem succeed. Thank you.
When you installed firebase tools, it generated a public folder for you. Inside that public folder, there is an index.html file(this file is the cause of the error). Just delete everything inside that index.html file, then replace with your own content.
In firebase.json file in hosting change "public": "public" to "public": "dist"
When you installed firebase, it changed the file public/index.html, the original version looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>hello-world-vuetify</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but hello-world-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Replace the content, it worked for me
First of all I am sorry for the title.
I deployed my flask app through Digital Ocean droplet but there's a problem where the bootstrap did not load. I already search through the internet regarding this problem and tried several way but did not work.
Below is the snippet of my code.
index.html
<!DOCTYPE html>
<head>
....
....
<link rel="icon" href="../static/icon/favicon.ico">
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/css/jumbotron.css" rel="stylesheet">
...
...
</head>
the link for the icon works great but for the css file, it didn't.
views.py
#app.route('/')
def index():
return render_template('index.html')
/etc/nginx/sites-available/webapptest
server {
listen 80;
server_name <droplet_ip_address>;
location / {
include uwsgi_params;
uwsgi_pass unix:/home/user1/project/webapptest/webapptest.sock;
}
location ^~ /static {
root home/user1/project/webapptest/app/static;
}
}
I am following this tutorial to serve my app on digitalocean. I am hoping maybe some of you can help me solving this problem. I believe I must had left something from these code but I do not know where.
The error looks like this when I checked using developer tools in Google chrome:
failed to load resource:the server responded with a status of 404 (Not Found) http://<droplet ip address>/static/css/bootstrap.min.css
Thank you for your help.
Not really sure what is going on there, but would it not be easier to just load bootstrap from free CDN like Maxi or jsDevlivr? Last time I had something like this I had loaded none minified versions to the server.
change href to >
https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css
If you need some other version just change 3.3.7 to a version you need.
LESS beginner.
Wrote a test html below
<head>
<link rel="stylesheet" type="text/css" href="404.less">
<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>test</body>
But got a warning in Chrome
Resource interpreted as Script but transferred with MIME type text/x-c++: "http://lesscss.googlecode.com/files/less-1.3.0.min.js".
Why?
You probably want your link tag to say:
<link rel="stylesheet/less" type="text/css" href="404.less">
That said, if this is being served from a webserver it could be that that's detecting the mime type wrong from the file extension. If it's an apache server though, there's an easy fix. Add this to/create a .htaccess file in your webroot, containing the line:
AddType text/css less
I had a similar issue with twitter follow-me buttons when I was reviewing local html files in chrome. To fix this I just fired up web matrix 2.0 and pointed at my folder. Hope this helps.
CSS link:
<link rel="stylesheet" href="/site_media/style.css"
type="/text/css" />
I'm getting a -404 error while loading my CSS sheet.When I try to debug the location thru Firebug(Firefox), I get the below location.
"C:\Python27\Djangoprojects\django_bookmarks..\django_bookmarks\site_media\style.css" does not exist
Site_media is determined by the Python code in URLS.py
site_media = os.path.join(os.path.dirname(__file__), 'site_media')
Why do I get the ..\ in the location?