Running npm run build command on create-react-app project creates a build folder and some default paths inside all files like in map files:
{"version":3,"sources":["../static/js/main.500cb0d9.js" ...
Can I change all the paths inside the build folder to match my BE, like
{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...
package.json:
{
"name": "reactTest",
"version": "0.1.0",
"private": true,
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.22.1",
"react": "^16.4.1",
"react-datepicker": "^1.5.0",
"react-dom": "^16.4.1",
"react-month-picker": "^1.3.7",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
You can set a root path for serving your React app in production using either of these two methods:
1. By setting a homepage property in your package.json file
Notice line 5:
{
"name": "reactTest",
"version": "0.1.0",
"private": true,
"homepage": "mywebsite/web",
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.22.1",
"react": "^16.4.1",
"react-datepicker": "^1.5.0",
"react-dom": "^16.4.1",
"react-month-picker": "^1.3.7",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
(see documentation)
2. Using the PUBLIC_URL environment variable
When running the build job, add the env var right before it, like this:
PUBLIC_URL=mywebsite/web npm run build
(see documentation)
What does it do?
These methods will not change the paths in the source map files, those will always be relative, but it will enable you to deploy your React app to your web server with an absolute path of your choosing.
It will result in the paths that include the JavaScript and CSS bundles in the generated index.html to be absolute, according to the value you have set:
<!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="mywebsite/web/manifest.json">
<link rel="shortcut icon" href="mywebsite/web/favicon.ico">
<title>React App</title>
<link href="mywebsite/web/static/css/main.c17080f1.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="mywebsite/web/static/js/main.dbfd0e89.js"></script>
</body>
</html>
Check the permanent solution of this post, I believe this is the best
convenient method:
https://github.com/facebook/create-react-app/issues/2575#issuecomment-452295290
For your convenience, I have copied and pasted here:
Create a file called .env at your project root(same place where
package.json is located). In this file write this(no quotes around the
url):
PUBLIC_URL=https://dsomething.cloudfront.net
Build your project as usual (npm run build) This will also generate
index.html with:
<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">
Following up on #patrick hund as the documentation location has moved and it appears some steps have changed. You can read here and interpret accordingly:
advanced deployment in CRA.
You can find a bunch of good information in this page that can give you all sorts of ideas for your next project. Here is my favorite little trick after reading the page:
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.
Related
Thanks for reading my question.
I successfully made a React JS App from scratch on my other PC using snowpack. And I tried it on my other one. But when I set everything up in powershell(where Im running the npm start from), it keeps telling me snowpack cant find index.js.
[snowpack] [404] Not Found (/.src/index.js)
So now my browser is just blank at the localhost.
Here is the code:
package.json
{
"name": "02",
"version": "1.0.0",
"description": "Practice 3",
"main": "index.js",
"scripts": {
"start": "snowpack dev",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "V",
"license": "MIT",
"devDependencies": {
"snowpack": "^3.8.8"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02</title>
</head>
<body>
<div id="root"></div>
<script type="module" src=".src/index.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Whats good React?</div>, document.getElementById('root'));
path structure
Apparently a jsx. compies down to a .js like it did on my other machine.
I tried to rename the index file to a normal .js. No difference. I encountered this issue before. But oddly, last time on my other machine I just closed powershell and ran 'npm start' again and it worked. Tried that thrice this time, no change. I also previously had a issue calling 'react' from both 'React' and 'ReactDOM' but fixed that setting 'react-dom' instead of 'react'.
Don't know why its saying this.
Im using webstorm IDE.
Thanks in advance.
I am developing a shareable widget with client as react 18 and server side as Asp.net mvc core 6 which can be called by using following approach:
When I try to run the npm run build command then I can see the following index.html page in build directory and there are some js, css plugins and images in the build directory.
<!doctype html><html lang="en">
<head><meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>React App</title>
<script defer="defer" src="/static/js/main.6134db66.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
</div>
</body>
</html>
Now my main focus is on calling js, css and image resources if I develop the widget. My widget can be accessed through a js and css plugin including a div element.
Now see following URLs will be dynamically generated each time.
src="/static/js/main.6134db66.js"
href="/static/css/main.073c9b0a.css"
How would I give it to my customers/clients if name 'll be changed after each npm run build.
You can see my client application source below which is calling my widget.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="http://localhost:3000/static/css/main.073c9b0a.css" rel="stylesheet"></head>
<script defer="defer" src="http://localhost:3000/static/js/main.6134db66.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
I can place it on one of my server domain but how to keep the plug name same ? I am also curios about my widget images. Will my widget image work correctly or 'll I have do something more for it ?
Any help will be appreciated.
See my package.json
{
"name": "widget",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I faced the same issue and solved it using react-app-rewired on a CRA, so I could modify the webpack config without ejecting the CRA.
You should install react-app-rewired and then configure your config-overrides.js and webpack.config.js like I show below:
// config-overrides.js
module.exports = function override(config, env) {
//do stuff with the webpack config...
config = {
...config,
output: {
...config.output,
library: "AwesomeWidget", // Important, the name of the lib to be exported
libraryTarget: "umd",
umdNamedDefine: true,
},
};
return config;
};
// webpack.config.js
module.exports = {
entry: {
"bundle.js": glob
.sync("build/static/?(js|css)/main.*.?(js|css)")
.map((f) => path.resolve(__dirname, f)),
},
output: {
library: "AwesomeWidget",
libraryTarget: "umd",
umdNamedDefine: true,
clean: true,
path: path.resolve(__dirname, "public/example/static"),
filename: "bundle.min.js", // Important, the name of the exported bundle, always the same name.
},
};
After that, you need to set scripts in your package.json, adding build scripts like so:
"scripts": {
"start": "react-app-rewired start",
"build": "yarn build:react && yarn build:bundle",
"build:react": "react-app-rewired build",
"build:bundle": "webpack --config webpack.config.js",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
As you can see, when running npm run build it will create a normal build (build:react) and then it will build using our custom webpack config (build:bundle).
This way, you will have exported a JS file always with the same name in public/example/static/bundle.min.js.
Then, I use this bundle in any HTML like this:
<script
src="url/to/bundle.min.js"
type="text/javascript"
></script>
<script type="text/javascript">
if (!!AwesomeWidget) {
// use your code here
AwesomeWidget.customMethod();
}
</script>
It may be a better way to solve it, hope it works for you.
Hello i can not deply on github pages, and i think i tried everything. Page go blank, when i remove index.html from main folder (default path is public folder) side is showing readme file.
Full code : https://github.com/mr-krystian-stawarczyk/Porfolio
Also installing npm gh-pages does not upload gh-pages branch to github site.
It looks like root div is not injected.
json
{
"name": "portfolio-project",
"version": "0.1.0",
"private": false,
"dependencies": {
"homepage" : "https://mr-krystian-stawarczyk.github.io/Porfolio",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"emailjs-com": "^2.6.4",
"jquery": "0.0.1-security",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-fontawesome": "^1.7.1",
"react-hook-form": "^7.5.3",
"react-particles-js": "^3.4.1",
"react-popupbox": "^2.0.8",
"react-responsive-carousel": "^3.2.18",
"react-scripts": "4.0.3",
"react-scroll": "^1.8.2",
"react-share": "^4.4.0",
"react-typed": "^1.2.0",
"react-update-popup": "^1.0.3",
"reactjs-popup": "^2.0.4",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>
PLEASE HELP :(
I am trying to load React build files in a Django template (serving the React build files via Django static files). I’ve had success using this approach in the past with other Django templates, but with this particular case, the React app is not attaching to my div in the Django template. The React app is created using create_react_app with minimal changes.
My src/index.js file: (only changed the root element)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('chat-root')
);
reportWebVitals();
My public/index.html file: (only changed the root element)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="chat-root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I built my files via npm run build and placed the build files in my Django static folder. These are then included in my Django template as follows. Note that this Django app has several other React “apps” that use this same approach without issue.
<div id="chat-root"></div>
{% compress js %}
<script src="{% static 'react/build_files/chat.chunk.js' %}"></script>
<script src="{% static 'react/build_files/main.chat.chunk.js' %}"></script>
{% endcompress %}
The Django url setup works with a simple html template so I am sure that is correct.
I have also tried not setting homepage in package.json and setting "homepage": "/"
but that didn't help.
There are no error during build or on browser console. The network tab in dev tools shows that the scripts get loaded but no react components get created.
I am new to react so any help will be appreciated. Thanks!
For anyone facing a similar issue, I was able to resolve it by placing all JS files created in the build.
I noticed there was another file runtime~main.[number].js being created when a build was created. I had skipped this file earlier based on the how the other React "apps" were added to static folder in Django app.
Placing this build file along with the other JS files allowed the app to attach to Django and load properly.
My react application is built using create react app https://reactjs.org/docs/create-a-new-react-app.html fails to start.
When i exec npm run start my application hangs with the following message.
Starting the development server...
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "^25.1.1",
"#types/node": "^13.7.0",
"#types/react": "^16.9.19",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"lodash": "^4.17.15",
"node-sass": "^4.13.1",
"npm-check-updates": "^4.0.1",
"qs": "^6.9.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"typescript": "^3.7.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#semantic-release/gitlab": "^6.0.2",
"semantic-release": "^17.0.2"
},
"release": {
"branch": "master",
"plugins": [
"#semantic-release/commit-analyzer",
"#semantic-release/release-notes-generator",
[
"#semantic-release/gitlab",
{
"gitlabUrl": "https://git.companyname.com"
}
]
]
}
}
Node Version: v12.14.1
Npm Version: 6.13.4
I have tried this a few times and each time it fails it is creating a new node process i know this because it asks me to select a different port.
So far i have attempted the following process without any luck
rm -rf node_modules
npm install
npm start
If you have installed some packages yourself after creating react application using creat-react-app, it may be because, one of the installed packages is not working.
In the past, I had a problem like your case.
At that time, I have installed react-pdf package to show pdfs.
As a consequence, development server didn't start and whenever I run again it asked to choose another port.
After removing that package, it worked well.
So I think there may be not working module in the package.json.
In my opinion, it may be 'qs' packagae.
I copied your package.json file and ran it locally on my machine.
First I ran npm install
I then created /src/index.js and chucked in the following default code from create-react-app:
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<div>We're in!</div>, document.getElementById("root"));
And I also created /public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Lastly, I ran npm start
The application ran fine, with the only concern being an out of date sub-dependency (Old version of corejs)
This leads me to think that the problem might be in your local setup.
I would recommend clearing your npm cache and trying again.
To clear your cache, run npm cache clear --f with elevated permissions.
My suggestion would then be to start a new app directory, just in case there's something corrupt in the existing directory.
For me it turned out restarting my computer fixed it.
I still don't know the cause of this as the environment has remained the same and apart from removing node_modules and npm install i did nothing else.
I fixed it by installing a previous version of npm-scripts
Try using this:
npm install react-scripts#2.1.8