How to add ReactJS /build folder to an existing website structure
up vote
0
down vote
favorite
I have already built my Create React App and compiled it to a /build folder. I also have a website (on WordPress in particular) where I am hoping to add my app.
My problem is that I can only find documentation on how to publish the app as a single page HTML document utilizing the index.html file. I want to somehow include only the part between the app's <body> if possible.
What happens when I have a preexisting <div id="root"></div> element inside my plugin? I have already added the /build folder in plugins root as well.
The produced code is
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<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">
<title>React App</title>
<link href="/static/css/main.dd742552.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!function(l),n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()()
</script>
<script src="/static/js/1.a789a71a.chunk.js"></script>
<script src="/static/js/main.5d390abf.chunk.js"></script>
</body>
</html>
One thought, I suppose, is to use an iframe with a specific width/height but that ruins the responsiveness of the app.
Are there any other ways? Thank you very much
javascript html wordpress reactjs create-react-app
asked 23 hours ago
Giannis Dallas
123115
add a comment |
up vote
0
down vote
favorite
I have already built my Create React App and compiled it to a /build folder. I also have a website (on WordPress in particular) where I am hoping to add my app.
My problem is that I can only find documentation on how to publish the app as a single page HTML document utilizing the index.html file. I want to somehow include only the part between the app's <body> if possible.
What happens when I have a preexisting <div id="root"></div> element inside my plugin? I have already added the /build folder in plugins root as well.
The produced code is
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<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">
<title>React App</title>
<link href="/static/css/main.dd742552.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!function(l),n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()()
</script>
<script src="/static/js/1.a789a71a.chunk.js"></script>
<script src="/static/js/main.5d390abf.chunk.js"></script>
</body>
</html>
One thought, I suppose, is to use an iframe with a specific width/height but that ruins the responsiveness of the app.
Are there any other ways? Thank you very much
javascript html wordpress reactjs create-react-app
asked 23 hours ago
Giannis Dallas
123115
maybe i don't understand but you just have to load your react build and call ReactDOM.render on your root id
– David Auvray
23 hours ago
this works only if the React App build is a standalone page. I can't useReactDOM.renderdirectly as the ES6 scripts throw an error inside the standard websites
– Giannis Dallas
21 hours ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have already built my Create React App and compiled it to a /build folder. I also have a website (on WordPress in particular) where I am hoping to add my app.
My problem is that I can only find documentation on how to publish the app as a single page HTML document utilizing the index.html file. I want to somehow include only the part between the app's <body> if possible.
What happens when I have a preexisting <div id="root"></div> element inside my plugin? I have already added the /build folder in plugins root as well.
The produced code is
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<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">
<title>React App</title>
<link href="/static/css/main.dd742552.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!function(l),n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()()
</script>
<script src="/static/js/1.a789a71a.chunk.js"></script>
<script src="/static/js/main.5d390abf.chunk.js"></script>
</body>
</html>
One thought, I suppose, is to use an iframe with a specific width/height but that ruins the responsiveness of the app.
Are there any other ways? Thank you very much
javascript html wordpress reactjs create-react-app
asked 23 hours ago
Giannis Dallas
123115
I have already built my Create React App and compiled it to a /build folder. I also have a website (on WordPress in particular) where I am hoping to add my app.
My problem is that I can only find documentation on how to publish the app as a single page HTML document utilizing the index.html file. I want to somehow include only the part between the app's <body> if possible.
What happens when I have a preexisting <div id="root"></div> element inside my plugin? I have already added the /build folder in plugins root as well.
The produced code is
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<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">
<title>React App</title>
<link href="/static/css/main.dd742552.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!function(l),n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()()
</script>
<script src="/static/js/1.a789a71a.chunk.js"></script>
<script src="/static/js/main.5d390abf.chunk.js"></script>
</body>
</html>
One thought, I suppose, is to use an iframe with a specific width/height but that ruins the responsiveness of the app.
Are there any other ways? Thank you very much
javascript html wordpress reactjs create-react-app
javascript html wordpress reactjs create-react-app
asked 23 hours ago
Giannis Dallas
123115
asked 23 hours ago
Giannis Dallas
123115
edited 20 hours ago
asked 23 hours ago
Giannis Dallas
123115
asked 23 hours ago
Giannis Dallas
123115
asked 23 hours ago
Giannis Dallas
123115
123115
maybe i don't understand but you just have to load your react build and call ReactDOM.render on your root id
– David Auvray
23 hours ago
this works only if the React App build is a standalone page. I can't useReactDOM.renderdirectly as the ES6 scripts throw an error inside the standard websites
– Giannis Dallas
21 hours ago
add a comment |
maybe i don't understand but you just have to load your react build and call ReactDOM.render on your root id
– David Auvray
23 hours ago
this works only if the React App build is a standalone page. I can't useReactDOM.renderdirectly as the ES6 scripts throw an error inside the standard websites
– Giannis Dallas
21 hours ago
maybe i don't understand but you just have to load your react build and call ReactDOM.render on your root id
– David Auvray
23 hours ago
maybe i don't understand but you just have to load your react build and call ReactDOM.render on your root id
– David Auvray
23 hours ago
this works only if the React App build is a standalone page. I can't use
ReactDOM.render directly as the ES6 scripts throw an error inside the standard websites– Giannis Dallas
21 hours ago
this works only if the React App build is a standalone page. I can't use
ReactDOM.render directly as the ES6 scripts throw an error inside the standard websites– Giannis Dallas
21 hours ago
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
When you build your App with create-react-app it creates an index.html file that uses your App in that specific index.html file. So for example if you render your app in the <div id="root"></div> it will place the app in that div.
If you look at the bottom om the generated index.html file you can see that your React app is just a .js file that is imported at the bottom of the index.html file. The building process bundles everything into this one .js file. The whole React app is in that .js file.
So .. what you can do is take this .js file and import it where you want to use it in your Wordpress site. The one thing you have to remember is that you have to have a DIV that is named exactly the same as the one you mount your React app in. So if you mount it in a div named root like this : ReactDOM.render(<App />, document.getElementById('root')); You must have a div named root in the html document you import your build file into. Also make sure you place any subfolders with images etc that you use in your React app in the correct root folder.
Hope this clear things up. =)
answered 21 hours ago
weibenfalk
1312
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
When you build your App with create-react-app it creates an index.html file that uses your App in that specific index.html file. So for example if you render your app in the <div id="root"></div> it will place the app in that div.
If you look at the bottom om the generated index.html file you can see that your React app is just a .js file that is imported at the bottom of the index.html file. The building process bundles everything into this one .js file. The whole React app is in that .js file.
So .. what you can do is take this .js file and import it where you want to use it in your Wordpress site. The one thing you have to remember is that you have to have a DIV that is named exactly the same as the one you mount your React app in. So if you mount it in a div named root like this : ReactDOM.render(<App />, document.getElementById('root')); You must have a div named root in the html document you import your build file into. Also make sure you place any subfolders with images etc that you use in your React app in the correct root folder.
Hope this clear things up. =)
answered 21 hours ago
weibenfalk
1312
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
When you build your App with create-react-app it creates an index.html file that uses your App in that specific index.html file. So for example if you render your app in the <div id="root"></div> it will place the app in that div.
If you look at the bottom om the generated index.html file you can see that your React app is just a .js file that is imported at the bottom of the index.html file. The building process bundles everything into this one .js file. The whole React app is in that .js file.
So .. what you can do is take this .js file and import it where you want to use it in your Wordpress site. The one thing you have to remember is that you have to have a DIV that is named exactly the same as the one you mount your React app in. So if you mount it in a div named root like this : ReactDOM.render(<App />, document.getElementById('root')); You must have a div named root in the html document you import your build file into. Also make sure you place any subfolders with images etc that you use in your React app in the correct root folder.
Hope this clear things up. =)
answered 21 hours ago
weibenfalk
1312
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
up vote
0
down vote
When you build your App with create-react-app it creates an index.html file that uses your App in that specific index.html file. So for example if you render your app in the <div id="root"></div> it will place the app in that div.
If you look at the bottom om the generated index.html file you can see that your React app is just a .js file that is imported at the bottom of the index.html file. The building process bundles everything into this one .js file. The whole React app is in that .js file.
So .. what you can do is take this .js file and import it where you want to use it in your Wordpress site. The one thing you have to remember is that you have to have a DIV that is named exactly the same as the one you mount your React app in. So if you mount it in a div named root like this : ReactDOM.render(<App />, document.getElementById('root')); You must have a div named root in the html document you import your build file into. Also make sure you place any subfolders with images etc that you use in your React app in the correct root folder.
Hope this clear things up. =)
answered 21 hours ago
weibenfalk
1312
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
When you build your App with create-react-app it creates an index.html file that uses your App in that specific index.html file. So for example if you render your app in the <div id="root"></div> it will place the app in that div.
If you look at the bottom om the generated index.html file you can see that your React app is just a .js file that is imported at the bottom of the index.html file. The building process bundles everything into this one .js file. The whole React app is in that .js file.
So .. what you can do is take this .js file and import it where you want to use it in your Wordpress site. The one thing you have to remember is that you have to have a DIV that is named exactly the same as the one you mount your React app in. So if you mount it in a div named root like this : ReactDOM.render(<App />, document.getElementById('root')); You must have a div named root in the html document you import your build file into. Also make sure you place any subfolders with images etc that you use in your React app in the correct root folder.
Hope this clear things up. =)
answered 21 hours ago
weibenfalk
1312
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 21 hours ago
weibenfalk
1312
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 21 hours ago
weibenfalk
1312
answered 21 hours ago
weibenfalk
1312
1312
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
weibenfalk is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53222218%2fhow-to-add-reactjs-build-folder-to-an-existing-website-structure%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
maybe i don't understand but you just have to load your react build and call ReactDOM.render on your root id
– David Auvray
23 hours ago
this works only if the React App build is a standalone page. I can't use
ReactDOM.renderdirectly as the ES6 scripts throw an error inside the standard websites– Giannis Dallas
21 hours ago