In the default polymer.json file I see:
"extraDependencies": [
"bower_components/webcomponentsjs/*.js",
"!bower_components/webcomponentsjs/gulpfile.js",
"manifest.json"
],
The documentation is a little vague about it:
Dependencies that the analyzer component of the Polymer build toolchain can’t discover, possibly because they're not statically imported, and that do not need to be bundled.
Why can't the toolchain discover it?
IF they cannot be discovered, why would we need to include them?
If they "don't need to be bundled", what's actually done with them?
As the documentation says, the toolchain can't discover these files because they are not statically imported. The analyzer only knows about static imports like this:
<link rel="import" href="../bower_components/my-component.html">
Most likely your bower_components/webcomponentsjs/*.js library is being imported dynamically by checking if the browser supports web components natively, and loading in the web components polyfill if not. As for manifest.json, it's not imported as an HTML import, but as a manifest as follows:
<link rel="manifest" href="/manifest.json">
The extraDependencies need to be included if you are using polymer build to make a production build of your app, so the polymer-cli knows to include these files in your build.
The web components js files don't need to be bundled (note that they still need to be added to the build) because you don't want every app coming with the full web components polyfill, when browsers like Chrome already support it natively. The manifest.json should not be bundled because it is a standalone file needed to get metadata for your application.
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 an asp.net core 2.1 MVC application. I have ran the Scaffold Identity which has generated all the HTML and models used. I can't however find the css file that identity is using for its layouts?
In chrome developer tools it tells me site.css is being loaded from /Identity/css/site.css and bootstrap is being loaded from /Identity/lib/bootstrap/dist/css/bootstrap.css. These files don't seem to exist anywhere in my project. Am I missing something?
It's not using the site.css file that's located in wwwroot/css.
The Identity default UI is a Razor Class Library. The static resources are being embedded and loaded from the library. Specifically, the Static Files middleware is loading up the embedded resources as if they were on the filesystem, using a ManifestEmbeddedFileProvider.
Long and short, you can override those by simply creating files in the same location in your project. Then, your project's versions will take over. Unfortunately, the scaffold doesn't provide a way to scaffold static resources as well. However, you can simply view the source in your browser and then copy that into your project's version of the file.
You can also view the source of the RCL here. That way you can reference whatever code you need, without even needing the scaffold. Anything you add to your own project overrides what's coming from the RCL.
How to set a Aurelia minimal project for work inside Browser
(no http server) how to set a bare minimum aurelia system/boilerplate
to work just inside browser (no NodeJS)
mainly for understanding/learning purpouses
no NodeJS (using just Javascript from latest browsers, advise Firefox Developper)
no npm (just download latest version and copy minimum files)
no folders (all in root flat folder for clarification and learn purpouses)
just ES6/7 (no Typescript, no Babel, etc)
just CSS use (no SASS, no LESS, etc.)
You should read the Quick Start in the docs and download the Basic Project Setup
However, there's no way to use ES6/7 without Babel (or other js compiler) today.
Take a look at this github repo: aurelia/aurelia which has a simple starter kit with a concatenated script-tag ready build.
I am using google web components from the following page but it seems that it has a lot of error. A lot of file is not found. Note: I am using google sign in and google analytics.
Google Web Components
How to resolve the issue without downloading and replace the the missing file path one by one?
You approach is completely wrong.
TL;DR One can not simply refer the url for the file and hope that relative paths in it are resolved automagically. The workflow is a way more complicated.
You should create an application (the easiest way is to use Yeoman’s generator for that). Than you should explicitly specify, which components you want to use with bower:
bower install google-calendar --save
... etc
That would install the components locally (--save is to update your bower.json).
Then you probably would vulcanize everything (thanks yeoman generator, grunt script comes with all the tasks prepared.) Your project is now ready to deploy.
Hope it helps.
You should be able to install the missing dependency components the same way you got your Google Web Component. Whether that is via download or bower or whatever, just make sure the relative paths line up. Even if you create a build task or generator you will still need the components dependencies correctly referenced.