I am using create-react-app to build an application and when I run npm run build it creates a build folder with static folder inside it which is expected.
build--> static
But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static which is why the page does not load properly as it is missing the assets .
Is there any config setting I can do to fix this problem ?
If all you want is to run your app, all that you have to do is run the command: npm start
But, if you are really trying to prefix the static references to upload your code on an specific subdirectory you should add on your package.json the homepage you want to use on your create-react-app.
So, if you want your react app to use /build in the beginning of each reference you should add the following line to your package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "/build",
...
}
The following message is displayed when you generate your build without the homepage in the configurations:
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build```
But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static
This behaviour is expected.
You're supposed to deploy the build folder and serve the application from it. Since index.html is inside build, it would be served for /, and files in build/static/* will be served for /static/*.
For more specific instructions for this, please read the Deployment section of the User Guide.
It sounds like you're trying to use unimported assets.
I prefer to create an assets folder and place these sort of files here, and then import/use them accordingly.
From the documentation:
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
If you really want to use the public folder, you can use the PUBLIC_URL variable.
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
Related
I have created a new next.js project. Is it possible to have an accessible static html page "outside" the project?
For example the structure would look like this:
.next
components
node_modules
pages
public
styles
aboutus
Now looking at the folder /aboutus/, it will have a structure like this:
css (folder)
js (folder)
images (folder)
index.html
Where the index.html references the css, js and the images.
But when i call http://localhost:3000/aboutus it gives me a 404 error.
Already tried this setup locally, but didn't work.
It turned out a 404 error.
I expect that to work.
Is it possible to have an accessible static html page "outside" the project?
No. Only files that are in the pages folder are generated as pages. pages in NextJS
The closest you can get to accomplish that is by running npm run export and manually insert your "aboutus" folder in the "out" folder. But the project wont have the benefits of These features.
In case the .js is not Next related, have you tried to put the aboutus folder in public/aboutus ?
It is doable with Create React App but with Vite ...
I try to add relative paths but still get error for CORS policy.
I add "homepage": "." in package.json file but still not working.
I was able to do this using a single file build plugin called viteSingleFile.
Just add it to the plugins in vite.config.js|ts file:
export default defineConfig({
plugins: [react(), viteSingleFile()]
})
I want my site entry point to be like http://localhost:8080/entrypoint
In angular, just need to run ng build --base-href /entrypoint.
Is there any equivalent parameter for react-scripts build?
If not, how can i achieve it, the base-href edit, as the index.html is generated.
Thanks.
You can achieve it by setting the homepage parameter in your package.json to the desired endpoint.
"homepage": "http://localhost:8080/entrypoint"
Edit
Or you can use the following approach to make all the assets paths relative to the index.js file.
According to the documentation:
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:
"homepage": ".",
This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
I am new to React CRA (it is rewired as per doc in ant-design description for project setup) and facing issues in adding multiple entry points in webpack-config file.
I have 2 html files in public folder, index.html & stack.html.
-public
-index.html //runs on localhost:3000
-stack.html // runs on localhost:3000/stack.html
-src
-index.tsx
-stack.tsx
-config-overrides.ts
Default html index.html and index.tsx is used to boot and load react components.
I created stack.html file and accordingly i have created stack.tsx file as entry point to boot and load react components. I am unable to wire things up.
What configuration should be made to wire this up.
It is possible to do this, but you will need to eject from CRA. After that:
Add entry to the other html file in paths.js.
Update entry inside webpack.config.js and add the second html file entry (to be similar to the original entry).
Change the output file name inside webpack.config.js. Change static/j/bundle.js to static/js/[name].bundle.js.
Upadte webpack plugins to generate second file with injected JS scripts (also inside webpack.config.js).
Update the ManifestPlugin configuration to include the new entry point (also inside webpack.config.js).
Finally, there are two different steps for development and production.
For DEV, rewrite paths using the following in webpackDevServer.config.js (if you want to redirect all /admin to admin.html file):
verbose: true,
rewrites: [
{ from: /^/admin/, to: '/admin.html' },
],
For Production, this step is different for each provider. For Heroku, it is very easy, just create a static.json file with the following content:
{
"root": "build/",
"routes": {
"/admin**": "admin.html",
"/**": "index.html"
}
}
For full details and file diffs, see this post.
AFAIK, there are no good ways of doing this.
One way is to just use react-scripts and build multiple apps by copying and replacing index.html and index.js for each build. Something like
https://gist.github.com/jkarttunen/741fd48eb441137404a168883238ddc1
Also for CRA v3, there is an open PR for fixing this: https://github.com/facebook/create-react-app/pull/8249
I have a simple react app deployed on Heroku, (using the static-build pack https://github.com/heroku/heroku-buildpack-static) however the images are not loading. I know this must have to do something with the path, as it works for me locally, however nothing I have tried works.
Here is what the directory looks like
build
index.html
bundle.js
node_modules
public
images
logo.png
index.html
src
components
LeftSidebar
index.js
static.json
webpack.config.js
Here is my static.json file:
{
"root": "build",
"routes": {
"/**": "index.html"
},
"https_only": true
}
I have set the image src (jsx in the LeftSidebar component) to have a relative path from the build to the public directory. The relative path from the build folder to the public folder like so:
"../public/images/logo.png"
The reason I did the above, is because I figured that since the only thing that is actually being ran in the browser is the index.html file which loads the bundle.js, which is invoking the <img /> this relative path would work. (please correct me if I'm wrong here)
I have also tried setting the path such that it is relative from my specific component LeftSidebar -- index.js to the image in the public folder:
../../../public/images/logo.png
I have also tried
public/images/logo.png
and a few other variations, all with no luck.
I think that I must be missing something more important about the way a static web server (Nginx in this case) will server static assets. Or int he way Webpack ultimately creates the bundle.js file.
It is also quite odd that there is no 404 status code returning, but the image won't load and the response in the network tab is nothing but a white screen.
When importing images into React, we usually rely on Webpack to copy the appropriate files over, rather than having to reference a public directory, e.g.
src
components
MyComponent
index.jsx
image.png
In my index.jsx file, I'd simply import the image like so:
import myImage from './image.png';
Finally, and most importantly, you need to update your Webpack config to include a loader for your images if doesn't already include one, such as file-loader.
See this question/answer for more details on the process: How to import image (.svg, .png ) in a React Component