I have an HTML project that I want to send to the user's browser via nodejs. Since each HTML file has a set of linked files like style.css, how do we do that?
Do I have to use "app.use" in express.js? Because in this case I have to send the whole project files (even unvisited pages file) to the user !!!
We do what is called a "public" folder. Inside this public folder, anyone can access these files. If your domain was example.com, and inside the public folder we have style.css, we can access sit by example.com/style.css. Any other files that are not in the public directory the user will not be able to access (unless you manually serve them in Express).
You do it in Express like this:
app.use(express.static(__dirname + '/public'));
So put all the files you want to access in the HTML file in the public directory.
You can link a CSS file in your HTML file (in the head tags) like:
<link rel="stylesheet" type="text/css" href="/style.css" />
Here's what you directory can look like:
- index.js (your main server)
- / public
- style.css
- someOtherFile.js
- etc...
- Your other files...
Related
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">
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.
I have deployed a React + NodeJS app in Heroku and the deployment went well and worked for a few hours. However, after a cache deletion, it now refuses to load the page. The errors are the following ones:
Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
and
GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)
The first one, the MIME error refers to a minified file produced by a Parcel build. It is called in a index.html file that lives inside the dist folder. This is the line calling it:
<link rel="stylesheet" href="/src.78399e21.css">
Its twin .js file is also called within index.html:
<script src="/src.78399e21.js"></script>
Problem 1): I don' know what to do to make the CSS file accepted. within it, there are some comments imported from the SCSS original files related to each component. I tried both to remove the comments and add the type of the file as CSS but it hasn't worked. It should be a subtle detail, but I don't know what else to attempt.
Problem 2: The JS file that Heroku is not finding it is at the same folder of the index.html. However, the routing of the app has been defined to have client (Router basename="/client") as root (https://flix-reloaded.herokuapp.com/client). If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
I tried to run another Parcel build, commiting changes, clean caches, but nothing worked. Can anyone provide me some help? I'll be happy to provide further details if necessary.
The index.html file code that lives inside the dist folder (where the production files live):
<html>
<head>
<title>myFlix</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>
<body>
<div class="app-container"></div>
<script src="/src.78399e21.js"></script>
</body>
</html>
Thanks in advance
If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
This is because you need to make the same /client/ fix to the <script src="/src.78399e21.js"></script> line.
In both cases, you've got the wrong URL for your CSS/JS files, and as a result the CSS/JS parsers are trying (and failing) to process the resulting 404 page's HTML as CSS/JS.
I want to inject a url (process.env.loginProviderUrl) in a static page for an external authentication provider which I've placed in the static folder which Gatsby automatically copies over to the public folder when building.
<html>
<head>
<meta name="salesforce-community" content="{process.env.loginProviderUrl}" />
<script
src="{process.env.loginProviderUrl}/servlet/servlet.loginwidgetcontroller?type=javascript_widget"
async="true"
defer="true"
></script>
</head>
<body></body>
</html>
But because it's in the static folder, it only gets copied over and the process.env.loginProviderUrl will never get replaced. How do I dynamically generate an html file in Gatsby which then gets copied to the static folder?
If you move your file to a separate folder that isn't processed by Gatsby you can instead set up a separate webpack configuration that will package files from that folder and provide them with ENV vars.
Alternately you could create a postbuild routine that uses simpler shell commands to find and replace instances of process.env.loginProviderUrl with the value from the local environment (e.g. sed).
This said, it may simply be easier to find another way to include this file in your Gatsby app.
I have built a small node server using express and I want to serve index.html which contains angular app. How ever the browser sends GET request for favicon.ico. I have installed serve-favicon, however still it looks for physical file. Is there a way to override it? or from where can I find such file
The recommended way is actually just to use a link tag in your index.html:
<link rel="icon" href="/img/favicon.png">
Just change the href to link to an img in your public folder and you're good to go.
http://www.w3.org/2005/10/howto-favicon
You can use this site to get free favicon.ico
Then add your favorite favicon.ico to your html .
<link rel="icon" type="image/png" href="../images/favicon.ico" />