The static css and images are failed to load in node.js - node.js

html code
I want to apply the css to it. But the static css and images are not in use in this case.

Related

Using custom Webfonts on Teachable

I am trying to use a custom font on my client's course marketing page on Teachable.com. Right now the course is not currently live, so unfortunately I can't share a link to preview.
I am trying to follow the Google Webfonts pattern of attributes in the link tag:
<link rel="preconnect" href="https://tablocreative.com/roo/webfonts.css" crossorigin>
I am hosting this webfont and the respective font files on a different hosting provider (standard Apache hosting). When I view the source of my page, I can see that file is being referenced - no 404 errors or access origin errors in the console.
This is the CSS:
html, body, main, div, p { font-family: 'Avenir LT Pro'; }
I can see in the inspector that declaration is being applied, no other font-family is set or overriding this. But the webfont will not load.
Any insights or ideas would be appreciated!
Check out the codepen on the readme of this repo.
It has a working example:
https://github.com/adriano-tirloni/google-fonts-css2

Static File On Django 3.2 Not Loading

My Problem is quite simple and yet I'm finding it so hard to solve it.
The problem is I am not able to load the CSS File and image which are on the static folder located on the root folder of the project. The static folder is not under the app name.
My project name is "ecommerce" and my app name is "store".
This is my file hierarchy for my project.
This is my settings.py
I have added my app too.
Yes, the STATICFILES_DIRS too.
Tried the other one too.
STATICFILES_DIRS = [
BASE_DIR / "static",
]
I used temp.html for showing the demo and here is my code.
And the CSS file which is named main.css
After doing all the things properly, the CSS file and image won't load.
Errors That I got in my terminal
And in developer mode in Chrome
As I know this is quite a rookie mistake and I am a beginner. I can't continue forward till this problem is solved. I'd be grateful if someone could come forward and assist me in resolving the issue.
First of all move your static folder in app directory that is store here
Now make another store folder inside the static
static/store
Now make all folders like css, js and img in static/store directory. Then Replace your css link in this link
<link rel="stylesheet" href="{% static 'css/main.css' %}">
And img tag link.
<img src="{% static 'images/cart.png' %}" alt="My image">

Embed pdf in .ejs file

I have a web app using express.js and I've tried to embed a pdf into a .ejs file as follows:
embed src="mypdf.pdf" width="500" height="375" />
This gives me the following error when I load that page: Cannot GET /mypdf.pdf
What is the correct way to display a pdf embedded in an .ejs file using express.js (I only want the pdf to take up a portion of the page)?
You need to give the correct path for your pdf.
Check the similar line in your app.js
app.use(express.static(path.join(__dirname, 'public')));
Here public is the directory which you are telling express to consider for static resources and can be accessed directly with root path.
Now create a new folder in this public folder called docs or you can put pdf directly in the public folder
change embed tag as following
<embed src="/doc/mypdf.pdf" width="500" height="375" type="application/pdf">
if you put pdf directly in a public folder then change the path to /mypdf.pdf.

What is the bootstrap process of an Angular Application? When app.component.htm loads and display?

I am new to Angular. I am working on a web application using Angular. When I start the project app.component.(ts, html...) and app.module.ts generated.
I am wondering when will the app.component.html will be rendered?
What should I put in app.component.html,
And when should I create an another component, like homepage component?
Will there be any differences between putting homepage in app.component.html and putting homepage in another component.html?
Welcome to Angular
So how bootstrap process works in Angular Application.
The entry point to every Angular Application is the main.ts file which contains this last line.
The platformBrowserDynamic() part of this line of code indicates that we are about to boot Angular in a browser environment.
The bootstrapModule() function bootstrap our root module which is app.module.ts.
AppModule(app.module.ts) is an entry module and also root module for our application.
app.component.ts is an entry component that we specify in app.module.ts.
So what should you keep in app.component.ts
You can consider app.component.ts as a HomeComponent also, but it is good to keep HomeComponent seprately and giving it's reference to app.component.ts.
You should create separate component for each separate page in your application.
Image source: medium.com
app.component.html is root component file. so its content display top. you create another component its will be render with root component. you can implement app routing module and define here application list of url for file. other word app.component.html is master page. and create new component is child page.
<html>
<head>
</head>
<body>
<!-- Content >> -->
<router-outlet></router-outlet>
<!-- Content << -->
/<body>
</html>
app.component.html is the page that will be rendered from your application. All the component's html pages created will be rendered with in app.component.html.
component's html pages will be rendered based on the routes set in app.module.ts.
for eg: if the route for 'home' is set as homeComponent then home.component.html will be rendered inside app.component.html.
To serve this purpose of dynamically loading the required components the app.component.html will have its content as nothing but output of routing module as,
<router-outlet></router-outlet>
reading further through the angular guide will help in understanding these concepts in depth. https://angular.io/

Include js/css in Liferay DXP JSP Hook (module fragment)

I am working on Liferay DXP SP3 with fix pack 24 installed. I have created a module fragment project to override (hook) the edit_permissions JSP. I have CSS and Javascript that is very specific to this custom JSP so I would like to include it with the module rather than with the theme. Based on this documentation, it sounds like I should be able to do this by making the module a "theme contributor" module. I have set the Liferay-Theme-Contributor-Type and Web-ContextPath attributes in the bnd.bnd file, like this:
Liferay-Theme-Contributor-Type: portlet.config.jsp.overrides
Web-ContextPath: /edit-permissions-theme-contributor
I have created a /src/main/resources/META-INF/resources/js folder and placed my custom javascript files in this folder. It is my understanding that with this configuration I should be able to include the custom javascript files in my JSP hook using a regular script tag with a path like this:
<script type="text/javascript" src="/o/edit-permissions-theme-contributor/js/my-custom-script.js"></script>
I have tried many variations of the URL (with and without the "o", etc.). However, I always get a 404 on my script file. Am I doing this incorrectly? Is there a better way to include static files in a fragment module?

Resources