I'm using Aurelia JS skeleton for TS and JSPM from github as a started app and as I was playing with it and opened a second browser tab to compare data on different pages. But as I worked in one tab, what I did was duplicated on the other tab. So I opened an incognito tab and tried that. It did the same thing! Is there a way to configure it so that I can have a different view on each tab within the same app?
Browsersync does this, you can turn off things like mirroring when you surf to localhost:3001 (this is the default url for the Aurelia CLI, so it could be different in your setup)
when running the skeleton you can disable the browsersync feature you are seeing by simply running gulp serve instead of gulp watch from the terminal
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.
I have an electron app.
It uses Bootstrap v4, Electron v2 amongst some other node modules.
I have a button which opens an electron dialog, the user selects a folder, and at this point, my application BrowserWindow appears to refresh.
I don't want this refresh to occur. I have created a test case which shows this behaviour. No doubt I have made a simple error, please can take a look at this repo to show the test case which reproduces my problem.
https://bitbucket.org/renegadeandy/electron-dialog-problem/src/master/
The problem was I am writing a log.txt file to the directory which is being watched by the electron-reload module.
When I write a new record to the log, the file changes, and causes my application to reload! Makes sense - but the combination of my logging & active reload isn't working nicely together.
I have solved it by simply removing electron-reload.
I've done the tutorials on how to setup Phpstorm to use live edit, and I started using the "Reload in browser" functionality, but in version 7 it reloads only that single url which i've set up at in the Debug configuration.
My problem is that before, in version 6 as I remeber, it automatically reloaded every single page that was opened in the browser, and was related to the domain I had in Debug configuration URL. (So if I had www.mysite.local set up in PHP Web aplication debug configuration, it also reloaded www.mysite.local/something, www.mysite.local/backoffice..), but not anymore in v7.
Does anybody know if it is still possible in the new version, so I don't have to make a configuration for every single page?
Thx
For now creating confifuration for each page seems to be necessary. Please vote for WEB-10165
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.