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. =)
I'm new to Angular and recently I started working on a simple personal SPA project. It was created using the angular cli, and the folder structure is nothing special:
- myApp
----e2e
----node_modules
----src
--------app
------------ main app module with two .ts components and html for each of them
...
Everything works fine when I use ng serve: I can see my components on localhost:4200 and Angular's functionality works as a charm.
However, when I run ng build and from inside the newly created dist folder I open index.html, I can't see my components at all.
The index.html file is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RoutingDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<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="main.js"></script></body>
</html>
I get no errors in the console for missing files and all of the JS and CSS files are being successfully read by the index.html.
Can someone explain why am I not seeing the components?
So you need to serve your page, easiest way is to do npm i -g http-server and the run http-server from command lint in your dist folder, then you will be able to see your page
I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>
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
I'm just starting out with typescript. I wanted to try working with this mankala example from within Visual Studio. Eventually I got it working but I had to include all of the .js files that were generated from .ts files in my default.htm file. The .htm file in the example only included one file - the one that contained the entry point. I'm guessing that there's something set wrong in my configuration that I'm compensating for by the multiple .js includes. Can anyone tell me what I'm doing wrong?
More details follow...
Here's what the original .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
And this is what my modified .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="Driver.js"></script>
<script type="text/javascript" src="Features.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="Position.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
To create the project I created a default ( not quite empty ) typescript project, deleted the automatically created app.ts file from that project and then added 6 new .ts files with the same names as the .ts files in the example. Then I copied the .ts files from the example over the new .ts files that were created by VS. I replaced the automatically generated app.css file with the play.css file from the example and replaced the contents of the automatically generated default.htm file with the contents of the play.htm from the sample. This didn't run but after I added the additional .js files to default.htm it did.
I'm using Visual Studio 2012 Express for the Web and the typescript 0.8.3.1 VS extension. I'm using the Chrome browser on windows7.
The difference here is how the compiler got invoked.
When you build the Mankala sample, assuming you read the README, you ran
tsc Driver.ts -out game.js
The -out flag tells the compiler to concatenate the compilation into one big .js file. However, the default behavior in Visual Studio projects is to build side-by-side, i.e. base.ts creates base.js, Features.ts creates Features.js, etc.
You can fix your project file by adding a <TypeScriptOutFile>game.js</TypeScriptOutFile> element to the project in the same <PropertyGroup> as the other TypeScript settings (near line 57 in a default new project). Be sure to add to both the Debug and Release PropertyGroup elements if you want the same behavior in both compilation settings, or create a new non-conditional PropertyGroup.