I am trying to build an ember app with ember-cli. I created the app with ember new HelloWorld and built it with ember build. Inside the "dist"-Folder is a index.html with this Markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HelloWorld</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/" />
<meta name="hello-world/config/environment" content="..." />
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/hello-world.css">
</head>
<body>
<script src="assets/vendor.js"></script>
<script src="assets/hello-world.js"></script>
</body>
</html>
In older Ember-Versions we wrote our templates inside this index.html. I know ember "precompiles" the templates now, but where are they? When I open the index.html with a Browser I get an empty page. How does this work now? Do we need to run a node server for the ember-app? I just want to copy the output of ember build inside a Asp.Net project and include the files into my index.cshtml.
In older Ember-Versions we wrote our templates inside this index.html.
I know ember "precompiles" the templates now, but where are they?
index.html is located in app/index.html. Rest of templates is in app/templates/.
When I open the index.html with a Browser I get an empty page. How
does this work now?
You should get errors in your console:
file:///assets/vendor.css Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///assets/appName.css Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///assets/vendor.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///assets/appName.js Failed to load resource: net::ERR_FILE_NOT_FOUND
It's because you don't have any server which would serve this assets. Opening dist/index.html directly via browser will not succeed. You need to setup simple Python server or copy assets to correct directories in your ASP.NET application. It should correctly expose assets paths for your Ember application.
I just want to copy the output of ember build inside a Asp.Net project
and include the files into my index.cshtml.
Do it. Place assets in correct folders, copy index.html contents to your .cshtml file.
However, I guess your approach won't work. If you want to integrate ASP.NET application with Ember, mixing files etc. you should include Ember library by yourself in ASP.NET files, then write code using globals(App.IndexController etc.).
Related
I am novice person to Django learning.
I have tried with simple linking HTML and CSS files in Django by referring some sites and videos but it seems CSS file is not included. Though I tried multiple times I am not getting the background color which I put in CSS file.
CSS file saved in static/css/style.css
body{
background-color: violet;
}
HTML file saved in templates/bg.html
{%load static%}
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> BG </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<h2 class="bg_class">BG Colour</h2>
<p>
Background Color is to be changed.<br>
</p>
<script src="" async defer></script>
</body>
</html>
Also, I have configured the static file in settings.py file too.
STATIC_URL = '/static/'
STATIC_DIRS=[
os.path.join(BASE_DIR,'static')
]
Instead of ‘violet’ background, I am still getting ‘white’ background.
Kindly help me to fix this.
Are you serving your static files?
If you are running the manage.py runserver you might want to add this to the end of your projects urls.py:
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
like here: https://github.com/almazkun/durls/blob/4b17a1b698430b442fc1e74e5b24f792f57cb17e/settings/urls.py#L28
or here:
How do you serve static files when using the django runserver development server?
Note that Django does not serve static and media files itself. You will need to setup it separetatly using things like nginx or whitenoise.
To managing the static file. First you need to know the development and production setup.
In development you need to set DEBUG=True in settings.py
In production you need to set DEBUG=False in settings.py
Development
For serving the static file in development project. You need to do two things .
First one is changing the settings.py file. Added this sample code.
STATIC_URL = '/static/'
if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, "static")
Second change is urls.py file. Add added this sample code-
## import this at the top
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
## bottom of the file `urls.py`
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
You can check out this django project. how you can change your code Repo Link.
Production
For production build you must follow this checklist.
After completing checklist, you can serve your static content using nginx web-server. Or you can use whitenoise python package.
Configure static files to work with NGINX or Medium blog(Configuring Django Static files with Nginx)
Using WhiteNoise with Django.
I think it will help your further working.
I have application generated with electron-forge cli with webpack template. My files structure is:
I'm trying to add some styles to index.html but it doesn't work as expected. I tried to add in <head> of index.html:
<link rel="stylesheet" type="text/css" href="../css/index.css">
not working. I also tried to add:
import '../css/index.css'
to renderer/js/index.js (since it's bundled by webpack anyway) but it also doesn't work. What I'm doing wrong? Is the path to stylesheet not correct in my index.html head because of using webpack?
Receiving the following console log from my static website
Failed to load resource: the server responded with a status of 404 ()
on style.css
Project structure
root - home.html
folder inside root - styles
file inside 'styles' folder - style.css
(It's a simple website, for testing firebase)
I've used firebase to create the instance of my website and it outputted my html to a public folder with index.html but no css files.
Like so public/index.html
I've added inline css to account for this by using <style media="screen"> and it works but it's still not reading/finding my style.css file
style.css link inside index.html (firebase created)
<link rel="stylesheet" type="text/css" href="../style/style.css">
Looked into other answers but they're using bootstrap supplied cdn/url. I want to be able to use the one I created.
Firebase hosting will only host the files under your public folder. Which means that your style folder is not being uploaded and thus index.html can't detect the css file.
You need to move your style folder to have it inside the public folder and change the link to:
<link rel="stylesheet" type="text/css" href="style/style.css">
How to specify a custom stylesheet (external) to a SSP template (Scala Server Pages) in Scalate?
I tried specifying the html linking in the default.ssp file as follows.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<%= unescape(body) %>
</body>
</html>
However the stylesheet is not served by Scalatra (Jetty Web Server). I tried inserting the script through <%#include .. as well. Still no luck.
The web page is served without any stylesheet!
You need to have the style.css file as follows.
cd <YourProjectRoot>/src/main/webapp/
mkdir css
touch style.css
Create a style.css file inside a directory css which should be within the webapp directory, for the Scalatra to find out and serve the resource (stylesheet) appropriately.
Note: The folder should be named as css however the file can be named as anything.
I'm developing a webapp on Eclipse and this is the file system directory structure:
myapp
- src
- build
- WebContent
- pages
- css
- images
- modules
- META-INF
- WEB-INF
When I run this webapp with Tomcat (Run from Eclipse) I can load in the browser
the jsp pages contained in (myapp -> WebContent -> pages) using for example this URL:
http://hostname:8080/myapp/pages/somepage.jsp
However the problem is that the loading of the css and images in such somepage.jsp fail.
In the code of the somepage.jsp I pointed the css in this way:
<link href="../css/new_style.css" rel="stylesheet" type="text/css"/>
And the image in this way:
<img src="../images/someimage.png"/>
Problem is I have no clue why such images and css are not loaded.
The problem is in the relative path, always a safer approach to do something like
<link href="<%=request.getContextPath()%>/css/new_style.css" rel="stylesheet" type="text/css"/>
or a JSTL equivalent
<link href="${pageContext.request.contextPath}/css/new_style.css" rel="stylesheet" type="text/css"/>
than you're starting from the root, accounting for context path as well
Better way is to use ${pageContext.request.contextPath} as it returns the name of the application's context.
For ex,
myapp/css/new_style.css can be dyanmically formed as {pageContext.request.contextPath}myapp/css/new_style.css
Have a look here to know What does "./" (dot slash) refer to in terms of an HTML file path location?