I have a landing page (some.html) pointing to bundle.js . Under the chrome debugger I do see all my files getting loaded properly but still I get errors in the code like 'this' is undefined etc .
Please note :
I don't have node / npm / webpack installed
I am not running webpack-dev-server running on this server
What is the proper way to deploy / refer a bundle.js file ?
Do I need to install webpack globally on this server ?
I need to know is it possible to just get the functionality of my SPA through a bundle.js being pointed from index.html provided that bundle.js was generated using a webpack on my dev-machine ?
Seems like yes through an index.html we can point to a bundled js if all the functionality is client side and we can get the desired functionality. My reactApp was broken because it the underlying the page (old application) was supporting prototype.js and therefore react's internal functions had issues. Once I removed reference to prototype - my application is working in that old container –
Related
I am trying to build a simple PWA (no frameworks) with the help of Workbox. For that I have been following tutorials on how to use workbox as well as looking at the official documentation. I tried generating a Service Worker with Workbox but the files generated seem very different to what I have seen in those tutorials.
I have noticed that all these tutorials were done with pretty old versions of Workbox (3.0 e.g.), so I am curious if I am missing some requirements since I am working with Workbox 6.5.4.
The first steps I took after creating the App shell:
npm install workbox-cli -g
workbox wizard (to generate workbox-config.js)
workbox generateSW / workbox generateSW workbox-config.js
Register Service Worker in my index.html
In all the tutorials I have seen, I see that one js file named "sw.js" is created when running workbox generateSW. However, when I do so it creates 4 js files ("sw.js", "sw.js.map", "workbox-d249b2c8.js", "workbox-d249b2c8.js.map"). I don't understand the content of them at all.
Contents of sw.js e.g.
if(!self.define){let e,s={};const i=(i,r)=>(i=new URL(i+".js",r).href,s[i]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()})).then((()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e})));self.define=(r,t)=>{const d=e||("document"in self?document.currentScript.src:"")||location.href;if(s[d])return;let n={};const o=e=>i(e,d),c={module:{uri:d},exports:n,require:o};s[d]=Promise.all(r.map((e=>c[e]||o(e)))).then((e=>(t(...e),n)))}}define(["./workbox-d249b2c8"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"css/main.css",revision:"d3072ab3693c185313018e404e07d914"},{url:"index.html",revision:"4fc118da921f59395f9c5d3e2ddd85b0"},{url:"js/app.js",revision:"aa3d97a8701edd5dae0d6a9bb89d65bd"}],{ignoreURLParametersMatching:[/^utm_/,/^fbclid$/]})}));
//# sourceMappingURL=sw.js.map
It looks completely different to the template generated in other tutorials... In the official documentation I don't see them go into detail about the file(s) that is created after running workbox generateSW. I still tried to see if the Service Worker would work since it said The service worker will precache 3 URLs, totaling 1.65 kB after I ran the command. Sadly, when I ran my http-server and DevTools there was no Service Worker to be found.
Thanks a lot in advance (feel free to tell me, if you need more information in order to solve this issue)!!
I was following the steps in https://single-spa.js.org/docs/create-single-spa to create a single-spa application
? Directory for new project testapp
? Select type to generate single-spa application / parcel
? Which framework do you want to use? angular
? Project name (can use letters, numbers, dash or underscore) testapp
Need to install the following packages:
#angular/cli
Ok to proceed? (y) y
npm WARN deprecated #npmcli/move-file#2.0.1: This functionality has been moved to #npmcli/fs
Node.js version v17.9.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
And then installing
npm i #angular-builders/custom-webpack
After running
npm run serve:single-spa:testapp
The application was deployed but it just showed a blank screen when accessing http://localhost:4200
Any idea?
I've been experimenting with single-spa for a while, and understand the basics of the developer experience. Create a parcel, yarn start on a unique port, add the reference to the import map declaration, and so on. The challenge with this is that as my root-config accrues more and more modules managing ports and import-maps starts to get tedious. What I want is to publish these modules to a central repository and load them from there (e.g., http://someserver.com/repository/moduleA/myorg-modulea.js, etc.).
I was recently introduced to localstack and started thinking maybe a local S3 bucket would serve for this. I have a configuration where builds (yarn build) are automatically published to an s3 bucket running on localstack. But when I try to load the root config index.html from the bucket I get the following JS error:
Unable to resolve bare specifier '#myorg/root-config'
I can access the JS files for each parcel and the root-config just fine via curl, so I suppose this would be a problem with any http server used in the same way. I can flip the root config to use the standard webpack-dev-server instead (on port 9000) and it works okay. So I'm guessing there's a difference between how a production build resolves these modules vs. the local build.
Has anyone tried something like this and got it working?
I had a similar issue that I got to work with http-server by adding each child .js file to a sub-folder in the root-config directory and launching the web server at the root-config directory level.
"imports": {
"#myorg/root-config": "http://someserver.com/root-config.js",
"#myorg/moduleA": "http://someserver.com/modules/moduleA/myorg-modulea.js",
"#myorg/moduleB": "http://someserver.com/modules/moduleB/myorg-moduleb.js",
"#myorg/moduleC": "http://someserver.com/modules/moduleC/myorg-modulec.js",
}
Note: By default, Single-SPA has an "isLocal" check before the current import mappings. You'll need to remove this if using a production build or it won't load the correct mappings.
<% if (isLocal) { %>
In my case, I was using localhost instead of someserver so I could navigate into the 'repository' folder and run npx http-server to get everything to run correctly.
I was hung up on this for a little while so hopefully this leads you in the right direction.
For the record, after trying several approaches to hosting a repository as described above, I found the unresolved bare specifier problem went away. So I have to chalk that up as just not having the right URL in the import map. Measure twice, cut once.
I'm starting a new project, so I installed the skeleton zf2 project from github.
I followed the instruction provided here https://github.com/ZF-Commons/ZfcUser, to install zfcuser.
I used composer to install zfcuser and changed the required files.
But although I can see the indexpage of the skeleton project at "http://localhost/Test/public/", when I go to "http://localhost/Test/User" all I see is default page saying
Not Found
The requested URL /Teste/public/user was not found on this server.
It's my first time installing modules on zf2. What am I missing?
Remember: All requests will be served out of public/index.
That means if you set up a route like "/some/route" your current setup will have you go to http://localhost/Test/public/some/route
So the ZfcUser route will be: http://localhost/Test/public/user
If you can, try pointing your host root dir to /public.
on a particular page on our site http://www.sakshum.org/ui/page/JoinUs.jsp which is build using gwt and deployed on GAE the module does not load.
This works fine in development env in eclipse and have no errors when looking via firebug in the console.
Please advise what may be wrong here and how to fix it?
look at the AE logs. firebug will only show you client side stuff. It's probably a classpath issue -- such as you have something locally but aren't uploading that jar ...etc.
Edit:
please post your JoinUs.jsp
I am calling my gwt module via a jsp page on AE no problem. Maybe the path in your script tag pointing to the *.nocache.jsp file is off somehow. Usually when things resolve locally but not on AE, for me, the problem was appengine-web.xml and setting include and exclude paths. I had to be careful there because things worked differently locally and deployed - especially using wildcard.
Also, look for uri errors under the dashboard (ae administration page). static resources that are not found will show there and not in the ae log since they are static.
Thanks all for the help. So, the issue was completely different. Actually the div tag was not rendering at all due to the coding error of a if statement in the jsp. On fixing that it started working