I am doing a little project where i have prepared the back end in python and the graphic user interface woth HTML, CSS & JS.
The python script doesn't require any external librariesand the only thing that it does is opening a JSON file with the data processed, since it's a game the results are casually generated, and because of this I don't have to pass any parameters to the script.
The problem is that I don't know how to trigger the script so it generates the json that i can access trough JabaScript.
the scheme of the project is this:
index.html
pages (folder)
newGame.html
loadGame.html
rules.html
python (folder)
python_script1.py
python_script2.py
python_script3.py
main.py
specifically i have to trigger the script once the user has loaded the newGame page or the loadGame one.
(obiuvsly the js isn't node.js is actual client-side JavaScript)
I obiuvsly did some research and i found the pyodyde open source project does what i want, the fact is that i can't figure out how to connect the interface file with the back-end one with this resource.
solution
Ok, with some other research i found out how to solve my problem.
But firstable I want to thank you guys for recommending me the PyScript library.
The problem I was having is that i needed to connect a python file within the pyscript tag.
At first i tought that I had to import it with the import keyword and than executing the file.
But than I discovered that the py-script tag has an src attribute and you can link all the external files that you want.
So, in the end, iall i had to do was to connect my file is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>newGame</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<py-script src= "./python scripts/test_file.py"></py-script>
<script src="script.js"></script>
</body>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</html>
There is a new library called PyScript (it can help you run python in your HTML), all you need to do to install the cli is doing this command:
pip install pyscript-cli (This command will install the cli not the library).
then you should do this command:
pyscript wrap python_file.py (NOTE: this will convert the python file to an html file so the python file name would be the name of the html file)
And it should be done.
The HTML code would be this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Homepage</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
Code here
</py-script>
</body>
</html>
But than, once i typed in the command and created the html file from the python script, how do I connect it to the "newLevel" page?
In Angular 6 app, I have a custom JavaScript file which I would like to load after minified bundles created by ng build --prod.
The desired output
<!doctype html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="runtime.06daa30a2963fa413676.js"></script>
<script src="polyfills.f6ae3e8b63939c618130.js"></script>
<script src="scripts.3093c8de343a90aee8a5.js"></script>
<script src="main.2f79061174841f85d990.js"></script>
<script src="customScript.js"></script>
</body>
</html>
The problem
By default, JavaScript bundles are added at the end of the <body> tag, which makes the customScript.js loads before them.
Is it possible to set in which line of the index.html Angular CLI should add script bundles created using Angular CLI or at least put them before the custom script?
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 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!