I'm building my angularjs application to Phonegap Android application. I have builded the project using Yeoman/Grunt and I get it to work on webserver after that, but When build with Cordova/Phonegap to Android .apk file and installed on device I get only this to console:
GET file:///android_asset/www/app/_main/main.tpl.html net::ERR_FILE_NOT_FOUND
When I debug the application with Chrome android debugging and look the source it sohws index.html as empty (but it can be can it? Since it has to load the angularjs to try to get to the main template, and that happens in the index.html) and I can't find any of the other .html files from there.
\platforms\android\assets\www
In cordovas android project folder everything seems to be just as it's upposed to be.
Figured it out by myself. It was due to the folder name.
"_main"
So the '_' -character broke it. :)
Related
I'm developing a Wordpress "widget" that is going to be a little react app. I've chosen create-react-app for this purpose.
Now I can see how to run the development server standalone easily enough, but I'd like to develop it while it sits inside the Wordpress website. I've created a trivial "Custom HTML" widget:
<div id="root"></div>
<script type="text/javascript" src="http://localhost:8080/static/js/bundle.js"></script>
This does not seem to work however...
Note I came up with /static/js/bundle.js by looking at the requests in the network tab when loading http://localhost:8080 directly, which is the prescribed way to access the dev version of the app.
So how do I access the development version of the app (with all the live reloading goodness) while embedded on my local version of the Wordpress site?
I had this same problem today in a PHP app I am developing. It is very frustrating to embed a create-react-app in development mode, and I had to consult a lot of different resources to learn how to do so. Here is a summary of my findings.
Using an iframe
Using an iframe to embed the create-react-app, as #quickshiftin suggests, is not a bad idea, but if you wish to pass configuration to the embedded SPA by calling methods or setting global variables in Javascript, it will not work* -- as the MDN documentation says (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scripting), iframes are subject to the same-origin policy.
* (Note: I found out after writing most of this answer that there is indeed a way to bypass the same-origin policy. It's called Window.postMessage(), and it's also mentioned in the section of the MDN documentation that I linked above. You may want to consider using that. But if you would like to avoid using an iframe for whatever reason, read on :)
Create-React-App file structure; embedding in production mode
The first thing you must know is that embedding bundle.js is not enough -- create-react-app builds multiple JS files that need to be embedded using <script> tags in the correct order. This blog post by Jeremiah Tabb describes the file structure of the bundled code and suggests a way to embed the create-react-app in production: https://betterprogramming.pub/how-to-embed-a-react-application-on-any-website-1bee1d15617f
The filenames of the bundled code contain hashes which change at every build. The hashing can't be disabled, it's a WONTFIX in create-react-app (https://github.com/facebook/create-react-app/issues/821). So, to get the bundled js filenames for a production build, in PHP, you can just traverse the build/static/js directory and output one <script> tag per .js file you find. (It may be wasteful to always request all chunks, but I haven't yet taken the time to look into the right way to do it.)
Development mode looks for chunks under the wrong path
But in development mode, which is your actual question, it is handled a bit differently. The index.html served by the dev server only loads three scripts initially: bundle.js, vendors~main.chunk.js and main.chunk.js. The other chunks are loaded dynamically. You can try embedding those three scripts on your Wordpress page, but you will find that at runtime, the 'bootstrap' code generated by Webpack looks for the chunks at the wrong URL, using e.g. localhost instead of localhost:3000, resulting in a chunk loading error.
PUBLIC_URL and "homepage" don't work in development mode
According to the Create-React-App documentation and various other answers on this site, you're supposed to be able to use the environment variable PUBLIC_URL or the key "homepage" in package.json to override the hostname and port where the JS code is served so that the chunks will load, but these settings don't do anything in development mode. This is an open issue in create-react-app: https://github.com/facebook/create-react-app/issues/9001
Workaround using npx patch-package
You might think you are in trouble and will have to eject your project and modify the webpack configuration yourself to get this working. But fortunately, there is a workaround described here in a comment by SergeyVolynkin which solves the problem without ejecting, using npx patch-package to patch react-dev-utils:
https://github.com/facebook/create-react-app/issues/9001#issuecomment-838370686
What SergeyVolynkin does not mention is that, after creating the patch and checking it into VCS, you should set up patch-package in your package.json so that the patches will be applied by npm / yarn when you run yarn / npm install. See the documentation for patch-package here: https://github.com/ds300/patch-package#set-up
Summary
After applying SergeyVolynkin's patch, I was able to get the development build embedded in my PHP app. I used the following scripts in my package.json:
"scripts": {
"start": "PORT=1234 PUBLIC_URL=http://localhost:1234 WDS_SOCKET_PORT=1234 react-scripts start",
"postinstall": "patch-package"
}
And I used the following lines in the HTML served by my PHP app:
<script src="http://localhost:1234/static/js/bundle.js"></script>
<script src="http://localhost:1234/static/js/vendors~main.chunk.js"></script>
<script src="http://localhost:1234/static/js/main.chunk.js"></script>
By doing this, I could embed an app created using create-react-app in dev mode in my PHP app.
Apologies for somewhat of a basic question, but I haven't been able to find the technical reason anywhere I've looked.
Basically, if I do npm run build I get a static html file and a bunch of css and javascript files in the build folder. I would think that I should then be able to open up that index.html file in the browser and have it work, just as would be the case for some static HTML built without React.
So, my question is: what is it that react is relying on that requires to be served up with a static file server like serve or webpack dev server?
It uses Ajax internally. The Same Origin Policy prevents it reading file: scheme URLs in most browsers.
I have been following this guide on displaying website pages as an app (http://antonylees.blogspot.co.uk/2013/02/launch-website-as-mobile-app-using.html).
Everything works apart from trying to access a local HTML file as a fallback option when there is no internet connection. I have researched and tried multiple methods to try and do this without luck. The 'This app requires an internet connection' popup works fine, but when trying to load the local HTML file, I either get a grey screen or the 'Page cannot be found' message.
The suggested way is:
window.location="local/index.html";
I have also tried:
window.location.href ="local/index.html";
and:
window.open('local/index.html');
The 'local' folder is a sub-folder of 'www'.
Is there something specific to Windows Phone 8 that I am missing? Any other ideas?
I am using Visual Studio 2013 Express, The latest version of Cordova, and live debugging on a Nokia Lumia 820.
Solved! The problem was completely unrelated to Cordova etc.
I am new to MS Visual Studio and this was my first project using it. I noticed that the local HTML file I was trying to load was not showing in the Solution Explorer. I realised that I had created the file externally of MSVS. As a result I had to right click in the solution explorer and add an existing item. Once I had done that everything worked fine using the same code as in the tutorial. I am guessing that the compile process only includes files listed in the solution explorer.
Thanks for looking anyway! And at least I now know how to display code correctly in Stack Overflow ;)
I've tried debugging typescript code in chrome which has enabled source maps in chrome. But no sourcemap files are loaded as can be seen in the network tab.
I'm using VS2012 and the latest web essentials package.
Any ideas what to do next?
If you want to debug inside VS 2012 you only need to set the breakpoint inside VS and use Internet Explorer when debugging.
from Say Hello to TypeScript
If you want to debug in Chrome with sourcemaps make sure that:
1.) they are enabled in Chrome (and you said you did that)
2.) they are generated by the IDE
You can enable their generation by using Web Essentials addon (check above article for details)
or
manually editing the project file's build step: https://stackoverflow.com/a/12730715/750216
Update:
It seems that at least in VS Express 2012 for Web sourcemaps are generated automatically by default - no settings needed.
You will not see sourcemap files in the network tab. If you go to the Sources tab you will see your typescript files in the list of Sources along the left. From there you can set your breakpoints.
I am currently beginning a project where we want to build an Interactive Whiteboard (educational activities) and deploy via CD-ROM. I want to build the project in HTML5 for it's interactivity and then somehow compile it to both .exe. and .dmg so when the CD-ROM is inserted it autoplays the 'Game'.
How is this possible? Any help/advice would be greatly appreciated. Thank you.
I already made a project using pure C (WinAPI) on github that can pack HTML files into single EXE using resources.
http://github.com/dns/WinAPI-Embed-Browser/releases
Use: res://programname.exe/test.html as path to access html files from your EXE file.
From here you also can hide the window border & just showing the content of your HTML app, or even running on fullscreen. This is very useful if you want to make interactive CD-ROM.
On Mac, you can use Delphi/Lazarus TWebBrowser control to load html files. However I don't know if mac program can access files from resource or not.
HTML 5 is a browser technology, so I think as long as the pc you are installing on has the latest browsers, installing your app should work fine.
Can you tell us why you want it as a CD-ROM based installation, where as you can easily host it online?
You may not need any .exe wrapping. Here is an approach.
Important: your autorun will be often disabled, [not so] quietly. Provide some instructions for running your application manually.
So:
Google for running a portable version of Firefox or Chrome from a CD. Have the browser prepared. Put it in a [sub]directory representing your CD.
Put your content there.
Create a .cmd file to invoke the browser with a command like,
FirefoxPortable.exe index.html
Create autorun.inf (details googlable) to call the above batch file.
Make a CD image from that directory. There are lots of CD burning applications that can do that.
Test.