I'm using React + Webpack. I'm currently trying to install a favicon but it's not working.
I have this in my public/index.html file:
<link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/icons/apple-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/icons/apple-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/icons/apple-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/icons/apple-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/icons/apple-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/icons/apple-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/icons/apple-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/icons/apple-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/apple-icon-180x180.png"/>
<link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/icons/android-icon-192x192.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/icons/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/icons/favicon-96x96.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/icons/favicon-16x16.png"/>
<link rel="manifest" href="%PUBLIC_URL%/icons/manifest.json">
And this is my public folder:
public
├── icons
│ ├── android-icon-144x144.png
│ ├── android-icon-192x192.png
│ ├── android-icon-36x36.png
│ ├── android-icon-48x48.png
│ ├── android-icon-72x72.png
│ ├── android-icon-96x96.png
│ ├── apple-icon-114x114.png
│ ├── apple-icon-120x120.png
│ ├── apple-icon-144x144.png
│ ├── apple-icon-152x152.png
│ ├── apple-icon-180x180.png
│ ├── apple-icon-57x57.png
│ ├── apple-icon-60x60.png
│ ├── apple-icon-72x72.png
│ ├── apple-icon-76x76.png
│ ├── apple-icon-precomposed.png
│ ├── apple-icon.png
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon-96x96.png
│ ├── favicon.ico
However, when I load the page it tells me that those icons don't exist.
Which part of the webpack config allows me to open access to the public folder?
Related
I’m using electron-forge and can’t figure out how to make paths relative to build.
Following snippet works in development mode, but not in productions mode.
<!DOCTYPE html>
<html lang="en" data-color-scheme="auto">
<head>
<link
rel="preload"
href="/c5c3959c04004102ea46.woff2"
as="font"
crossorigin="anonymous"
/>
<link
rel="preload"
href="/535bc89d4af715503b01.woff2"
as="font"
crossorigin="anonymous"
/>
<meta charset="utf-8" />
<title>Test app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
These are the errors thrown:
index.html:1 GET file:///c5c3959c04004102ea46.woff2 net::ERR_FILE_NOT_FOUND
index.html:1 GET file:///535bc89d4af715503b01.woff2 net::ERR_FILE_NOT_FOUND
Thanks for helping out!
As your Electron application will be built in a different directory, run by your user(s) on any drive in any directory on any OS of their choosing, reference to file paths must be relative (not absolute).
Below are examples of what your <link> href would look like depending on a typical directory structure.
Example 1
Flat render-process directory structure.
Project Root
├── src
| ├── main-process
| └── render-process
| ├── index.html
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
Example 2
Downwards render-process directory structure.
Project Root
├── src
| ├── main-process
| └── render-process
| ├── index.html
| └── fonts
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
Example 3
Up / down render-process directory structure.
Note use of the ../
This moves you up one folder level.
Up from html (folder) -> to render-process (folder).
Project Root
├── src
| ├── main-process
| └── render-process
| ├── html
| | └── index.html
| └── fonts
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="../fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
Example 4
An even deeper up / down render-process directory structure.
Note use of the ../../
This moves you up two folder levels.
Up from main (folder) -> to html (folder) -> to render-process (folder).
Project Root
├── src
| ├── main-process
| └── render-process
| ├── html
| | └── main
| | └── index.html
| └── css
| └── fonts
| ├── c5c3959c04004102ea46.woff2
| └── 535bc89d4af715503b01.woff2
└── package.json
index.html (render process)
<link rel="preload" href="../../css/fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../../css/fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />
Is there any reason why mysite/blog/ list page doesn't use the blog/list.html layout given my directory structure? According to https://discourse.gohugo.io/t/unify-the-section-template-lookup-order-please-comment/5648 I should be able to.
Hugo version: v0.49/extended darwin/amd64 BuildDate: unknown
├── content
│ ├── _index.md
│ ├── blog
│ │ ├── post-1.md
│ │ ├── post-2.md
│ │ ├── post-3.md
│ ├── get-started.md
│ └── services.md
├── data
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html -----> Don't want to use this layout
│ │ ├── taxonomy.html
│ │ └── terms.html
│ ├── blog
│ │ ├── li.html
│ │ ├── list.html -----> Want to use this layout
│ │ ├── single.html
│ │ ├── summary-with-image.html
│ │ └── summary.html
│ ├── get-started
│ │ └── single.html
│ ├── index.html
│ ├── partials
│ │ ├── site-footer.html
│ │ ├── site-header.html
│ │ ├── site-scripts-footer.html
│ │ ├── site-scripts-head.html
I have a react application with the following files and folders:
├── static
│ ├── css
│ │ └── someCssFile.css
│ ├── js
│ │ └── someJsFile.js
├── index.html
├── web.config
The web.config file is as following:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<!-- This part is responsible for URL rewrites -->
<rewrite>
<rules>
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="index.html"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
And the index.html file is as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.8833e8af.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.8f22fc15.js"></script>
</body>
</html>
I have also installed the URL Rewrite. But when deploying the app on the ISS, it does not work!
Could you please help me with the problem?
Your action url needs to be a fully qualified url. E.g.
<action type="Redirect" url="https://{HTTP_HOST}/index.html"/>
{HTTP_HOST} is replaced by IIS with the actual hostname in the request. You may want to hardcode your actual domain if you have several domains/ redirects pointing at the same site.
I'm using the latest create-ract-appversion for my project and I have a custom.js file with a CustomFunction function in it.
I need is to access to the CustomFunctionfunction from one of my components.
Which is the best way to achieve this?
Importing the file into index.html like below, I have 'CustomFunction' is not defined no-undef' error:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- jQuery import -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- Custom Style and JS import -->
<link rel="stylesheet" href="./CustomComponent/custom.css">
<script src="./CustomComponent/custom.js"></script>
This is the project structure:
10 ├── public
11 │ ├── customComponent
12 │ │ ├── custom.js
13 │ │ └── custom.css
14 │ ├── favicon.ico
15 │ ├── index.html
16 │ └── manifest.json
What you need to do is export the function form you custom.js file like
const CustomFunction = () => {
}
export {CustomFunction};
Now you can import it in any of the component like
import {CustomFunction} from './path/to/custom.js';
If you have multiple of them in component.js, which you want to use in other components then you can export them like
export {
CustomFunction,
CustomVariable,
CustomVar2,
CustomFunction2
}
And import like
import {CustomFunction, CustomVariable, CustomVar2, CustomFunction2} from './path/to/custom.js';
What is the ideal way to link to assets in the node_modules folder to be deployed to Heroku?
I am using NodeJS using EJS Javascript templating. My app has dependencies on jQuery and Bootstrap. I used NPM to pull those modules into node_modules and then tried to link them in my html as follows:
<!-- Bootstrap CSS and custom CSS links -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen" charset="utf-8">
<script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
.
├── Procfile
├── README.md
├── app.js
├── app.json
├── node_modules
│ ├── bootstrap
│ │ ├── dist
│ │ │ ├── css
│ │ │ └── js
│ │ ├── jquery
│ │ │ ├── dist
│ │ │ │ ├── jquery.min.js
├── package.json
├── public
│ ├── css
│ ├── img
│ └── js
└── views
├── pages
└── partials
This did not work. Apologies and thanks in advance for your help with such a noob question.
I found a suitable answer in this related question:
https://stackoverflow.com/a/27464258/6111872
Specifically, this syntax:
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));