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.
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.
I am trying to develop a widget in reactjs 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"
]
}
}
if someone want to ask something then please ask.
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
I'm new to React and I used this explanation to build a basic React app:
https://facebook.github.io/react/docs/installation.html
I opened a new project by:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
index.html file is located in hello-world/public and here is the content of it:
<!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">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
</body>
</html>
However, all the "React stuff" is placed in hello-world\src directory. It looks that 'hello-world\src\index.js' activates the components.
What I don't understand is how index.html "reads" the content of index.js. index.html has no html tag that leads to index.js.
I can start this application by doing "npm start". What this command does is raising a server running on localhost:3000. How can I see the application without using "npm start"?
If we look at the DOM rendered on the browser (for npm start), it has the below script node injected:
<script type="text/javascript" src="/static/js/bundle.js"></script>
Similarly, for the production builds (npm run build), there is an index.html file under build folder that has a similar script node injected.
Example in my case:
<script type="text/javascript" src="./static/js/main.440dcd65.js">
Therefore, I tend to think that the script node injection is done by the react-scripts library or from one of it's dependencies.
Also, to run the app without a web server, the below should work:
Have "homepage": "./" defined in the package.json
Run a production build (npm run build)
Launch the index.html directly from the build folder.
Edited:
The configurations under ./node_modules/react-scripts/config appears to takes care of the <script> node injection.
Example: ./node_modules/react-scripts/config/webpack.config.dev.js has,
// Generates an index.html file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
You just need to bundle all your codes in single js file,for doing that you can use tools like webpack.
Suppose You have project structure like this:-
Project
-src
-app.js
-index.html
-package.json
-node-modules
You need to add webpack.config.js :- in your root directory which will contain some certain configurations to bundle your codes.
webpack.config.js will look alike this:-
var path = require('path');
var webpack = require('webpack');
BUILD_DIR = path.resolve(__dirname,'dist');
DEV_DIR = path.resolve(__dirname,'src');
var config = {
entry:DEV_DIR + '/app.js',
output:{
path:BUILD_DIR,
filename:'bundle.min.js',
},
module:{
loaders:[
{
test:/\.jsx?/,
include:DEV_DIR,
loader:'babel-loader',
exclude:/node_modules/,
}
]
},
};
module.exports = config;
Add a .babelrc file in your root directory:-
{
"presets": ["react","es2015","stage-1"]
}
after that In your root directory run command:-webpack
that will create a dist folder which will contain your bundle.min.js.
Edits in your index.html :-
<script src = "dist/bundle.min.js"></script>
package.json
"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.4.1",
},
I know this is quite a big but in my opinion you will have to go through this process while developing in react,so better to go through this in the beginning.