GitHub Repo for all the files related to this question:- click here
UPDATE
static files are not being collected in STATIC_ROOT folder
I have changed settings of the base directory(telusko) of my Django framework and also added {%load static%} in index.html but then also the console of chrome shows:
GET http://127.0.0.1:8000/static/plugins/OwlCarousel2-2.2.1/owl.carousel.css
net::ERR_ABORTED 404 (Not Found)
code snippet of setting.py;
sitetravello contains all the HTML, CSS, js files and I have created assets for all the static file through cmd python manage.py collectstatic.
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILILE_DIRS = [
os.path.join(BASE_DIR, 'sitetravello')
]
STATIC_ROOT = os.path.join(BASE_DIR,'assets')
The main index.html file code is:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travello template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
<link href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
ERROR IN CHROME:
Failed to load resource: the server response with the status of 404(not found)
ERROR IN CHROME CONSOLE:
GET http://127.0.0.1:8000/static/plugins/OwlCarousel2-2.2.1/owl.carousel.css
net::ERR_ABORTED 404 (Not Found)
Your STATIC_ROOT is set to look for folder(s) named assets. Make sure you have your plugins/OwlCarousel2-2.2.1/owl.carousel.css inside assets named folder.
Related
I want want to create an index.jsp file instead of index.html while doing production build. This weird requirement is for capturing the header part which we will getting from other Oracle Authentication Manager so I want load my appliation from index.jsp. My index.jsp should look something like this
<%# page language="java" import="java.util.*" session="true" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CardEncryption</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.06daa30a2963fa413676.js"></script><script type="text/javascript" src="polyfills.9a8743e2009b1e7b1fbd.js"></script><script type="text/javascript" src="main.dcf4ad6dff6130812df3.js"></script></body>
</html>
Any suggestion to do this.
I suppose you only want the index.jsp when doing the production build. The development process should still use index.html
In that case you should
Create a index.jsp file in the same directory as your index.html file (so you have both).
Update your angular.json file's production configuration by adding an index property to your production configuration like this:
That will make sure that it uses index.jsp when you build with --prod, but still uses index.html for development.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
<script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
<link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">
</head>
<body>
<div class="container">
hello
</div>
</body>
</html>
I have to specify full directory path for loading the js and css files
(jquery.min.js and bootstrp.min.js and bootstrap.min.css).Here i have
(/slim/app/views/animations/) as the directory which contain all the
files. if currently i am in the views directory i should use the
(animations/whatever the file name) but it is not working in these
way. but if i use the full directory path it all works fine. why these
is happening can anyone explain.
(slim) is my root directory where i installed slim
Using Relative paths is not how you typically work with Slim. Your assets (JavaScript/CSS/images, etc) should be referenced absolute from your views:
src="/assets/js/myapp.js"
Routed URLs do not map directly to file system based resources because templates should not be accessed by URL publically - they are only served by the controllers.
A common slim file structure looks like this:
app/
public/index.php
templates/
view.html
assets/
images/
js/
css/
Some add the assets subfolders directly into the public folder.
Others have those folders on the root level.
However, in general, public assets (e.g. CSS, JS, images) should be beneath the public document root (accessible to the public).
One thing that could be helpful if you do not like this behavior is to use Slim's basePath variable.
You should be able to set the base URL as a View variable in a slim.before callback in your index.php so that it is available to all routes like this:
$app->hook('slim.before', function () use ($app) {
$app->view()->appendData(array('baseUrl' => '/base/url/here'));
});
or
$app->hook('slim.before', function () use ($app) {
$posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
$baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
$app->view()->appendData(array('baseUrl' => $baseUrl ));
});
And then apply it to the references in your HTML tag of the base template file and that's it.
<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />
Or use Uri::getBaseUrl(), e.g.
$basePath = $request->getUri()->getBasePath();
This question has been asked multiple times I know, but I have searched and tried everything, and it still doesn't work. I'm new to Node. My file directory is set up like this:
io
-node_modules/
-app/
--css
--js
-index.html
-server.js
Server.js:
var express = require('express');
var app = express();
//app.use(express.static(__dirname+'/app/css'));
app.use('/css', express.static(__dirname+'/app/css'));
var server=require('http').createServer(app);
var io=require('socket.io').listen(server);
users=[];
connections=[];
//set up server
server.listen(process.env.PORT || 3001);
console.log('Server running...');
//create a route
app.get('/',function(req,res){
res.sendFile(__dirname+'/app/index.html');
});
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IO Chat</title>
<meta name="description" content="">
<meta name="author" content="Lloyd">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="css/main.css" rel="sylesheet">
<link href="css/bootstrap.css" rel="sylesheet">
<!--link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.js"></script>
</head>
So what I need to know is why index.html doesn't seem to able to reference my css files. I've tried multiple possible combinations in app.use() and it just doesn't want to work, even though at times I can get to the file directly from the browser.
in the server:
app.use(express.static(__dirname+'/app/css'));
in the client:
<link href="/main.css" rel="stylesheet">
<link href="/bootstrap.css" rel="stylesheet">
I think you're using the app.use wrong
Try it like this :
app.use('css', express.static(__dirname+'/app/css'));
this routes calls to css/... to the static dir named.
The project is done on MVC5, and when i publish the project through visual studio on azure, the images and css effects cannot be done. I did try through the Bundling.config but still cannot get it done. i have an img folder inside Content (it has all the images).
I have the following in my bundle config file:
bundles.Add(new StyleBundle("~/Content/img").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/base.css",
"~/Content/parallaxstyle.css",
"~/Content/bootstrap.css",
"~/Content/pricing.css",
"~/Content/pricing2.css"));
and in view:
#Scripts.Render("~/Content/img")
But it doesn't even render the css files.
This is the root.
The layout view:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/img/demo/_small")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/base.css")
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab">
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
That's because you created a StyleBundle, and are trying to render a ScriptBundle.
Change this:
#Scripts.Render("~/Content/img")
To this:
#Styles.Render("~/Content/img")
Note that if you have an actual folder at ~/Content/img, consider changing the name of the bundle so that there is no name clash.
I have a polymer 0.10+ web app that works in Dartium (Dart VM) and worked until Polymer 0.10.0-pre.12.
When I compile it to JS (Pub Build) and run it as JS under Google Chrome, my polymer (big) component doesn't appear and I have this message in console :
"Resource interpreted as Script but transferred with MIME type application/dart: "127.0.0.1:8080/cvwebkit.html_bootstrap.dart". cvwebkit.html:295"
line 295 : <script type="application/dart" src="cvwebkit.html_bootstrap.dart"></script></body></html>
When I change this line to <script src="cvwebkit.html_bootstrap.dart.js"></script></body></html> in cvwebkit.html in the build directory, it works.
When I launch directly the modified file, I have this url and it works (at least partially) 127.0.0.1:3030/CVWebkit/WebApp/build/web/cvwebkit.html
When I launch normally the "dev" file as JS, I have the above issue with this url : 127.0.0.1:8080/cvwebkit.html
My "head" :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CVWebKit</title>
<link rel="stylesheet" href="cvwebkit.css">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="imgdyn.html"> <!--to ensure dynamic assets are created by polymer, so that there is no attempt first by the browser-->
<link rel="import" href="cvwebkitscript.html"> <!--needed to include the link to the dart script as we can't use both "src" and "export" in the script line-->
<link rel="import" href="zone-ruban.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
</head>
Any idea ?