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" />
Related
I cloned my friend's vite project in my system. Installed the required packages even with using --force and audit fix. The Project runs with no error but when the url is opened on website I couldn't see any contents in it except a blank (white) website and in console I am getting the following Error.
The request url "F:\Anish#\react\churi\Expense-Tracker\src\main.jsx" is outside of Vite serving allow list. - F:/Anish/#/react/churi
Refer to docs https://vitejs.dev/config/server-options.html#server-fs-allow for configurations and more details.
This is my vite config file
vite.config.js
import { defineConfig } from 'vite'
import react from '#vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['..']
}
}
This is Project's Directory Tree
F:.
| .gitignore
| index.html
| package-lock.json
| package.json
| vite.config.js
|
+---public
| vite.svg
|
\---src
| App.css
| App.jsx
| index.css
| main.jsx
|
+---assets
| react.svg
|
\---components
\---Signin
Signin.css
Signin.jsx
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
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?
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/'));