I am not sure what is happening with that behavior but when :
i include the following script link in the HTML
<link href='./css/style.css' rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="./js/app.js"></script>
the page is not applying css or js if I just open the HTML page in any browser directly, but it runs on the server and apply the links
when i include the following instead of the pervious link
<link href='../static/css/style.css' rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../static/js/app.js"></script>
it Runs when open the Page in browser directly , but it is not applying when run on server
i can not figure out why this happening
The reason behind this is because when you run on the server, Spring boot maps the src/main/resources/static folder to your context root (usually /).
That means that if you have the following structure:
src/
main/
resources/
static/
myStyle.css
templates/
index.html
Both the src/main/resources/static/myStyle.css and the src/main/resources/templates/index.html will be available as /myStyle.css and /index.html.
If you're using Spring boot you should never include the static/ (or templates/) part in your links/references. You should never open the HTML page directly in your browser since this does not reflect any real environment.
To make it work locally you should run the Spring boot application and open the application through your browser, not just some HTML file in the project itself.
Related
I am shifting my development environment from windows to mac, and when I run the code after the complete setup, my website doesn't loads and doesn't shows any style and js doesn't work.
I have this path of the file, everything was working on my windows very fine but when I run it from the mac then the file path is not loading, how do I fix this? I am trying to search whole web, couldn't find this answer and ended up here :(
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/bootstrap.min.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/style.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css" rel="stylesheet">
<link href="/_content/FileUploading.SearchEngine.Shared/content/scripts/script.js" rel="stylesheet">
This become the url of the path of the file = https://localhost:5002/_content/FileUploading.SearchEngine.Shared/content/styles/dashboard.css
This doesn't loads.
I have this path of the file, everything was working on my windows
very fine but when I run it from the mac then the file path is not
loading, how do I fix this?
It would be nicer if you could share your configuration details regarding how you are calling the path and where is your actual resources are located. The issue you are having might be causing due to numerous reasons.
As you may know, a BlazorWebView control has a configured host file (HostPage), typically wwwroot/index.html. The HostPage path is relative to the project. All static web assets (scripts, CSS files, images, and other files) that are referenced from a BlazorWebView are relative to its configured HostPage.
Thus, web root of the HostPage determines which subset of static assets are available. Therefore, its recommended placing the HostPage at the root of the wwwroot folder of the app, which provides the greatest flexibility for supplying static assets from the app, RCLs, and via subfolders of the app and RCLs.
How to Resolve:
Static File Middleware configuration :
Let's consider, your resouce files are outside of your wwwroot folder; Therefore, In non-IIS hosting and reverse proxy hosting scenarios, additional Static File Middleware configuration might be required to serve static files correctly. For you scenario if your static are placed outside, please check if you are using as following:
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath, "StaticFilesFolderName")),
RequestPath = "/StaticFilesFolderName"
});
Then you should refer that files as following on your _Layout.cshtml file:
<link rel="stylesheet" href="~/StaticFilesFolderName/site.css" asp-append-version="true" />
Note: Please have a look this official document.
Program.cs File:
builder.WebHost.UseStaticWebAssets();
Note: If you have static file configuration you should have UseStaticWebAssets in your program.cs file just below the builder.
Check App based path:
As explained earlier, this might happening due to your resource path while moving to MAC. In this scenario its recommended to use relative based path reference on top of your base href in _Layout.cshtml after that you can place rest of your resource file. So if your resource are inside wwwroot place your base href top of your other path reference and access it by hostname/your_resource_path.
<base href="~/" />
and following should also work:
<base href="~/YourApp/" />
Note: The trailing slash is required in some scenrio if you would get any css loading issue.
Static files in non-Development environments:
Be aware of non development environment as well because Blazor apps run locally, static web assets are only enabled by default in the Development environment therefore, to enable static files for environments other than Development during local development and testing we have to call UseStaticWebAssets on the WebApplicationBuilder.
Output:
I am trying to use a single HTML stylesheet that I've created between multiple apps script web app projects. I have the HTML stylesheet hosted on an external site but cannot figure out the code to include that external stylesheet into my apps script projects.
I've currently got it working with the following code in my Index.html file:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= include('stylesheet') ?>
The include function calls:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
And my stylesheet is a separate HTML file in my Apps Script.
This all works well, but I'd like to have a central repository elsewhere (I've read that I cannot link to an Apps Script file in another project) for my stylesheet so that whatever changes I make will update to all of my Apps Script projects automatically.
To do this, I've uploaded my stylesheet.html to a website and have taken the link that points to the file (i.e. http://www.test.com/stylesheet.html) and tried to do the following without success:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
I've placed this in the head element of my Index.html file, and I also tried it above the head element. Neither worked.
I've also tried to just use the include function that worked as mentioned above and modify my stylesheet.html to be blank except for:
<link rel="stylesheet" href="http://www.test.com/stylesheet.html">
None of this seems to work, wondering if anyone else has any thoughts on how this might be possible.
Host CSS file in Google Drive
Create a .css stylesheet file and host it on Google Drive.
Change the uploaded file permissions to publish it on the Web.
Now copy the published file ID and use it to build the following URL:
https://drive.google.com/uc?export=view&id=FILE-ID-GOES-HERE
Now include the generated URL to your HTML page using the <link/> tag in this way:
<link rel="stylesheet" href="google_drive_link_goes_here">
Reference
Host CSS or JS file on Google Drive
I have a problem...
I have an Aurelia pplication where I would like to load styles from Index.html instead of app.html.
Why?
Because when the application starts, there is a slight timespan before styles are loaded where user can see unstyled application.
As I am loading all the styles in app.html, the main.js executes before, and it loads all the plugins that takes some time.
Is there a way to do this?
You just use a standard link element to link to the css file in index.html. This stylesheet will not be bundled with your application bundle, and it can't be as you need access to it before your bundle file(s) is/are parsed.
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
You can add a gulp task to copy this file at build time, as the Aurelia CLI is built on gulp tasks.
Maybe the solution of my problem is contained in the question, but basically
I'm new to ExtJs 4 MVC and am having some difficulty where to place my JSPs.
I'm using Spring MVC using the Request Mapping annotation.
I'm having relative path problems with ExtJs App.JS finding my controller.
I usually put my JSPs under WEB-INF/views and my ExtJs 4 App is in WebContent/app.
I am trying to set up the example as shown on:
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture
and in the example the index.html is contained in the app package.
So I have a view called WEB-INF/views/sample-view.jsp and this includes the app.js script, which works fine.
My app has a controller like the example, and this is the problem, because it seems to try to find that internally in ExtJs using the appFolder, and controllers.
This resource can't be found, because my view is in another package all together. Does this make sense ?
Should I just move my view out of WEB-INF ? And if so will Spring MVC complain?
Thanks,
Lisa
For the first attempt at getting this running it is easiest to use all static files just to keep things simple. Once the app is running from static html and js files, migration can then be made to use the spring mvc and jsp pages.
To start be sure there is a folder named resources under the webapp folder, assuming webapp is the parent of your existing WEB-INF folder.
The basic starting folder structure for using a static html page will be:
webapp
- resources
-- app
-- css
--- ext-all.css
-- sass
-- themes
- WEB-INF
-- spring
-- classes
-- views
index.html
app.js
ext-all-debug.js
In WEB-INF there is likely a spring folder with an mvc-config.xml file or similar. In that config file the resources folder needs to be designated for serving static content by using the resources tag. Likely, the first mvc:annotation-driven tag is alrleady in the config file as in this snipped below. Add the resources tag noted below into the config file.
<!-- Configures support for #Controllers -->
<mvc:annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
With this in place the resources folder can serve the index.html file much like setup of the Sencha example.
All of this is setting you up to be able to build the first example from a url like:
http://localhost:8080/resources/index.html
When downloaded and extracted, the Ext JS zip, contains a resources folder. Copy the subfolders of that folder into the webapp/resources folder. Also copy ext-all.debug.js to the webapp/resources folder.
Then create index.html in webapp/resources with this content similar to the Sencha tutorial:
<html>
<head>
<title>Static Account Manager</title>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css">
<script type="text/javascript" src="./ext-all-debug.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body></body>
</html>
Create app.js in the webapp/resources folder as the following snippet and enough is in place to be up and running with the single panel configured in app.js. From this point the tutorial is easy enough to port over to this setup.
Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
After that static html file is running correctly, a jsp can be used from the view folder and will have content like this:
<html>
<head>
<title>JSP Account Manager</title>
<link rel="stylesheet" type="text/css" href="./resoures/css/ext-all.css">
<script type="text/javascript" src="./resoures/ext-all-debug.js"></script>
<script type="text/javascript" src="./resoures/app.js"></script>
</head>
<body></body>
</html>
a bit off topic, but if you are going to use Spring MVC might as well use Grails - you will save yourself a lot of typing and figuring out bunches of config files.
I got a PL/SQL Web Toolkit project not online (url : http://127.0.0.1:8080/dad/my_procedure).
And I just want to know how to import a local CSS file into this procedure...
I tried to do something like this :
htp.print('<link href="'C:/Users/Me/Desktop/css/filecss.css" rel="stylesheet" type="text/css" />');
or even
htp.print('<link href="/css/filecss.css" rel="stylesheet" type="text/css" />');
with no success...
In reality I don't know what's the root directory for a project like this.
The CSS file has to be within the HEAD area of the webpage. You should have your htp.print statement between the htp.headopen and htp.headclose calls.
Also, the CSS file path is relative to the web server processing the request, so the path should be to the directory on the web server that the CSS file resides.