We Keep Coding

ExtJS: Dynamic Package loading and build profiles

I'm trying to use dynamic package loading in my Sencha ExtJS App.
I created the package in my workspace (sencha generate package SR2000) and added SR2000 to the uses-Array in app.json:
"requires": [
"package-loader",
"font-awesome",
...
],
"uses": ["SR2000"],
In Application.js i added the loading to launch:
launch: function (profile) {
console.log('Current Config:', Base.config.Config.getConfig());
Ext.Package.load('SR2000');
Ext.Viewport.getController().onLaunch();
Ext.getBody().removeCls('launching');
this.callParent([profile]);
},
I then watch / build the app with option -uses:
sencha app watch -uses <build_profile>
When loading the app in the Browser i get error 404
The app is trying to load:
http://localhost:1841/build/development/wolfitsmart/resources/SR2000/SR2000.js
but the build output for the package is here:
http://localhost:1841/build/development/wolfitsmart/<build_profile>/resources/SR2000/SR2000.js
How can i get the package loader to look in the build_profile-Folder, or get the build to put the package in the resources-Folder?
I added the build_profile-Folder to resources in app.json, that did not help:
"resources": [
{
"path": "resources",
"output": "shared"
}
],
changed to:
"resources": [
{
"path": "resources",
"output": "shared"
},
{
"path": "${build.id}/resources"
}
],

Some useful instructions for building and using dynamic packages.
sencha app build -dev -pac yourpackagename /// build development
sencha app build -pac yourpackagename // build release
sencha app watch -pac yourpackagename
if (Ext.Package.isLoaded('packagename')) {
// package is loaded
} else {
Ext.Package.load('packagename').then(function () {
// package is loaded
});
}

Cordova electron publish to s3

I want to include the ability to publish (as I've done through electron-builder before) a Windows app to a S3 bucket, in order to be able to use electron-builder's auto-upload.
I'm on the stage of being able to deploy my packed app to the storage.
I have a .sh script to start the deployment:
cordova platform add electron
echo "Setting main.js ..."
cp res/electron/cdv-electron-main.js platforms/cordova-electron/platform_www/cdv-electron-main.js 2>/dev/null
cp res/electron/cdv-electron-main.js platforms/electron/platform_www/cdv-electron-main.js 2>/dev/null
echo "Package build ..."
webpack --config webpack.config.electron.production.js && cordova build electron --release --publish=always
echo "Done."
I also have a build.json file.
{
"electron": {
"linux": {
"package": [
"dir"
]
},
"windows": {
"publish": [
{
"provider": "s3",
"bucket": "hub-staticfiles.bexfyinfra.com"
}
],
"package": [
"portable"
]
}
}
}
and a bucket with the following permissions:
But I don't seem able to publish my app, get the latest.yml or anything of the sort. I believe I have the correct credentials in my .aws/credentials folder too.
Any ideas how can I go about making it work?
Thank you in advance.

Next Js - Firebase deployment issue

I am building up a new Next Js app and its a stright forward way to make the app gets deployed in vercel by linking the gitlab Next js project..
For same project I am in the need to deploy it in firebase.
Things I have tried:
-> Made firebase init
That gives firebase.json ,
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
But the above one gives the error like,
From this error I am able to get that it tries to fetch the index.html but I am not sure where it will be after npm run build ..
So I tried giving pages directory and index.js file like,
{
"hosting": {
"public": "pages",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"rewrites": [{
"source": "/pages/**",
"destination": "/index.js"
},
{
"source": "**",
"destination": "/index.js"
}]
}
But this just prints the code available in index.js to the UI like,
import React, { Component } from "react";
import Router from "next/router";
export default class Index extends Component {
componentDidMount = () => {
Router.push("/landing",'');
};
render() {
return <div />;
}
}
The gitlab-ci.yml file as follows,
image: node:12.13.0-alpine
stages:
- deploy
cache:
paths:
- node_modules/
key: "$CI_BUILD_REPO"
deploy-prod:
stage: deploy
only:
- master
script:
- npm install
- npm run build
- npm install -g firebase-tools
- firebase -V
- firebase use anvisysytems --token "token_hidden"
- firebase deploy --only hosting -m "Pipe $CI_PIPELINE_ID Build $CI_BUILD_ID" --token "token_hidden"
Please help me to achieve the result of fetching the right index.html that will gets generated after building the Next Js application and make the app content load in UI instead of the errors(like above image) or code(like index.js code rendering in UI).

Firebase can host only static files,
To host NEXT js project as static files, you can use export option and then deploy it to Firebase.
https://nextjs.org/docs/advanced-features/static-html-export

Versioning an angular application in production

I have multi module application, where some of my modules are lazily loaded, and so the output files in dist folder looks like this 1.d2ef1******8da.chunk.js, 2.dsfd3******8da.chunk.js and like wise. The problem is, if I create a new build for the production, then the hash changes and so the file names. Suppose a user has not refreshed the page, they still will try to lazily load the old file which will be shown as file not found. In such case my page hangs. How should I handle it ?

You can make use of Angular Service Workers to change your app into a PWA (Progressive Web Application).
It makes use of angular service workers to alert users to reload if a new version of app is deployed.
For Ex:
Install #angular/service-worker, add it to package.json and install dependencies.
Import ServiceWorkerModule in AppModule:
import { ServiceWorkerModule } from '#angular/service-worker';
Register it in the AppModule imports array:
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
Use it in app root component:
import { Component, OnInit } from "#angular/core";
import { SwUpdate } from "#angular/service-worker";
export class AppComponent implements OnInit {
constructor(private swUpdate: SwUpdate){}
ngOnInit(): void {
if (this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe(() => {
if (confirm("A New version of site is available. Load New Version?")) {
window.location.reload();
}
});
}
}
}
If you are on angular 4 and cli ~1.6. The process should be same.
npm install #angular/service-worker
add it in App Module as explained above
create a ngsw-config.json file in your app’s src directory.
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
Trying it Out
With the configuration in place, we can build the app for production (ng build --prod) and test it out using a local static server using -
npx http-server /dist

Most of the steps apart from #4 above are done automatically by latest angular cli command (https://angular.io/api/service-worker):
ng add #angular/pwa

Browserify: override package and use different main file

Browserify's "browser" field in the package.json seems overloaded and I can't figure out a way to get around this issue
How would I shim several packages not necessary in the browser (such as ws and canvas) while also changing the "main" file for browserify's use
I was hoping something like this would work
{
"browser": {
"ws": "./src/browser/ws-shim",
"main": "./src/BrowserVersion"
}
}
src/browser/ws-shim
module.exports = global.WebSocket;
Repository in question has some specific Node functionality such as services over TCP and stream support which won't make sense in the browser. Meanwhile, we use node ports of several browser APIs to share code between the Node and Browserifyied versions of the lib

Use the browser key to map to your main file.
{
"browser": "./src/browserIndex.js"
}
Then use the aliasify transform to map the rest of your dependencies.
{
"browserify": {
"transform": [ "aliasify" ]
},
"aliasify": {
"aliases": {
"ws": "./src/browser/ws-shim"
}
},
"devDependencies": {
"aliasify": "^1.4.0"
}
}