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){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={2:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],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
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. =)
Related
I installed bootstrap using NPM
In a normal svelte project I usualy add bootstrap and other packages, which are used project wide, in the App.ts file. However, in a SvelteKit project there is no main entry point.
So what is the recommended way of adding bootstrap 5 or other packages to SvelteKit globally?
I don't want to use rollup plugins, but rather just want to import it as an module in JavaScript
As of SvelteKit 1.0, the easiest way I found to add static scripts and styles that will be available everywhere is to add them to
src/app.html
That is the file that includes everything else including the <html> tag, so you can place the styles in the <head> and the scripts in the <body>, including CDN URLs, like you have always done before.
This setup allows you to easily override Bootstrap settings, e.g. I added a style to unset the <body>'s background-color that is set by Bootstrap.
To host the scripts yourself rather than use a CDN, put them in the src/static directory and reference them using the prefix %sveltekit.assets%/. For example, I placed the files bootstrap.min.css and bootstrap.bundle.min.js in src/static/bootstrap-5.0.2/ so now my src/app.html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link href="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.min.css" rel="stylesheet">
<style>
body {
/* override Bootstrap */
background-color: unset;
}
</style>
</head>
<body>
<div style="display: contents">%sveltekit.body%</div>
<script src="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.bundle.min.js"></script>
</body>
</html>
If you want to use a CDN instead of self hosting the files then for e.g. for Bootstrap 5.0.2 you can use the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
You can make a top level __layout and import everything there.
I add this because this seems to be a good way for adding packages to a SvelteKit app.
https://github.com/svelte-add/svelte-add
If you want to add Bootstrap for example use
npx svelte-add#latest bootstrap
As of date of writing this, there are not alot of packages yet, hopefully that changes in the future.
Firstly run npm install bootstrap inside your sveltekit project.
Then
In your root +layout.svelte put
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
</script>
References
https://vitejs.dev/guide/features.html#css
https://vitejs.dev/guide/assets.html#explicit-url-imports
I read somewhere on the internet that index.html is the entry point for a react app. However, the same article then went on to say that index.js is the main entry point (as well as for most node apps). So, which one is it?
When someone loads a react app in the browser, I assume index.js is run first, which in return loads index.html. But how does that happen typically... As in, how does the flow go from loading the app in the browser to first running index.js?
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="%PUBLIC_URL%/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>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Secondly, after npx create-react-app app, the code was run using npm start. So, I presume node.js is also involved. However, I can't find any familiar looking node code here. Where is the code that makes the server listen to port 3000, for instance?
In simple words:
index.html is where all your UI is rendered by React and index.js is where all your JS codes exist. So browser, first get index.html and then renders the file. then JS in index.js is responsible for all the logical rendering of UI, which takes element with id root to be its base element for rendering all the UIs.
Like in vanilla JS, React searches for element with ID 'root' and keeps all the UI to be rendered inside that element using the virtual DOM concept. You can view this concept.
After you complete the React development, you have to use a build tool to build React App by npm build or yarn build, which merges all your codes to single file. So when a client requests your site, the server sends .html with the JS files. So, at last, JS files manipulates the single .html file.
About the create-react-app, react-scripts package that comes when you create a react app with npx create-react-app handles all the requirements to serve a development serve using node. All the files of packages are inside node_moudles.
This links may be helpful:
React Rendering
Introduction to react rendering
npm build
Virtual DOM
Develpoment server in React from create-react-app
I believe you are using create-react-app.
After npm install
when you check a file named node_modules/react-scripts/config/paths.js inside the node_modules folder. You see the below code.
....
....
appHtml: resolveApp('public/index.html'),
....
paths.appIndexJs is the entry file in the webpack config.
HtmlWebpackPlugin loads the html at the path paths.appHtml.
So inside your application directory,
appHtml is file public/index.html and
appIndexJs is file src/index.js.
I'm finally trying to implement some of the stuff i've been reading about with Bootstrap and React.
I started this React tutorial:
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
The hello world app works fine. Now i'm trying to insert some bootstrap code into this hello world app and i'm already bumping into issues.
I added this code in my index.html in the head tag:
Index.html code looks like this:
<!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">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css.site.css" rel="stylesheet">
<!--
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 - Test Title</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="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>
also, the App.js file looks like this (with React)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<body>
<div className="container">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</body>
);
}
}
export default App;
However, the page renders without bootstrap. it looks like this:
One of three columns
One of three columns
One of three columns
class is a reserved word in JavaScript, so you can't use that in JSX. The proper syntax is className.
The class attribute is a javascript word, so React has implementedclassName, which in the end is the same thing.
You can take a look at React's own documentation:
https://reactjs.org/docs/dom-elements.html#classname
Sorry my english :D
I created 2 different Angular projects in the following way:
$ ng new comp-a
$ ng new comp-b
Then, I modified each of them to look different and with each of them I ran the following command to build the corresponding HTML file with the necessary Javascript and CSS files:
$ ng build --base-href "./"
I noticed that on each index.html file generated on each project there are referenced the following Javascript files:
- runtime.js
- polyfills.js
- styles.js
- vendor.js
- main.js
What I want to do:
Create one common HTML file referencing the common files and renaming the non-common files to the component name, something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing Angular Components</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<comp-a></comp-a>
<comp-b></comp-b>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="comp-a.js"></script>
<script type="text/javascript" src="comp-b.js"></script>
</body>
</html>
Requirements of my goal:
I need to generate one Javascript file per each component.
I need to use them out of an Angular project like in a normal HTML page like on the example above. Of course I can add the other common Javascript files like on the example above.
Is this possible?
I did a try and didn't work. Maybe, if that's possible, I didn't in the right way. I have to say that I don't have too much experience with Angular.
Thanks!
Two Angular Components in a single Angular Application is what you need.
To demonstrate, lets create a new Angular Application:
ng new my-app
Go to Angular Application folder:
cd my-app
Notice the index.html file that has just been created. Common HTML that you mentioned above can reside in this index.html file. Just preserve <app-root></app-root> tags and everything else can be replaced as you wish.
Then, create two Angular Components:
ng generate component comp1
ng generate component comp2
Edit inside app.component.html file so that this Bootstrap Component would wrap these two recently created Angular Components:
app.component.html:
<app-comp1></app-comp1>
<app-comp2></app-comp2>
Test your Angular Application:
ng serve --open
You should be seeing something like this:
comp1 works! comp2 works!
I'm having trouble with some components running in MS IE 10/11.
And according to this arcticle from Angular.io (https://angular.io/docs/ts/latest/guide/browser-support.html) I need to import an external script.
<script src="node_modules/core-js/client/shim.min.js"></script>
Which I placed in my index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
...
<script src="../node_modules/core-js/client/shim.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
But when i build for production it doesn't add it to the build, it just leaves it there ending in a script not found error when running the application.
I'm probably missing something but I don't know what.
Thanks in advance!
In your .angular-cli.json file, locate (or create) the "scripts" key in the definition for your app, and add an entry in the array for the shim.js script, e.g.:
"scripts": [
"../node_modules/core-js/client/shim.min.js"
],
Restart your ng serve or rebuild your bundles and you should be good to go.
Hope this helps!
You need to add CSS files and JS files in the angular-cli.json file. If you are not using angular-cli in this case you need to configure in the build tool which you are using