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
});
}

Typescript issues with multiple projects in the same VSCode workspace

I work with a VSCode workspace that holds various projects, often containing a Nuxt.js application, that has its own tsconfig.json. I recently added an Nx monorepo to the mix and it looks like my typings are not found by IntelliSense anymore.
My workspace looks like the following, with 3 projects so far.
my-project
--tsconfig.json
my-other-project
--tsconfig.json
my-monorepo
--tsconfig.base.json
apps/my-app
--tsconfig.json
--tsconfig.spec.json
I now get errors like this if I open a file in my-project for instance, but if I open the project alone in another VSCode instance, the error is gone.
const { $axios } = context;
Property '$axios' does not exist on type 'Context'.ts(2339)
The definiton is here but it seems like it's not found in a multi-project setup.
my-project/tsconfig.json
"types": [
"#nuxt/types",
"#types/node",
"#nuxtjs/i18n",
"#types/jest",
"#testing-library/vue",
"#testing-library/jest-dom",
"#pinia/nuxt",
"#nuxtjs/axios" <- The definition
],
I'm using Takeover Mode along with the Volar extension, maybe that could also explain why I run into these kinds of problems.
workspace.code-workspace
{
"folders": [
{
"name": "my-project",
"path": "my-project"
},
{
"name": "my-other-project",
"path": "my-other-project"
},
{
"name": "my-monorepo",
"path": "my-monorepo"
}
],
"settings": {}
}

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.

React-snapshot pre-renders index.html on all routes with create-react-app and serve

I am using create-react-app and react-snapshot for pre-rendering. Serving the build using serve
serve -s build -l 80
But strangely for all the routes, only index.js is pre-rendered.
Below is the react-snapshot configuration in package.json
"reactSnapshot": {
"exclude": [
"/districts-data",
"/districts-data?*",
"/suggest-time",
"/covid-19-statistics"
],
"snapshotDelay": 300
}
I have excluded all the paths that include lazy loading.
I have gone through this answer but I am not catching anything in my service worker just kept it for PWA.
sw.js
self.addEventListener('fetch', function (event) {
});
self.addEventListener('install', function (event) {
});
self.addEventListener('activate', (event) => { });

After investing a couple of days and deep-diving in the serve code I realize the mistake I was doing is having -s option while running serve script.
serve -s build -l 80
Having -s option default all routes served from index.html.Having -s flag is essential if you are just serving build generated via Create react app else routes other than "/" will return a response 400.
You can simply use serve build if you have all the routes pre-rendered but if there are some routes for which you don't have pre-rendered HTML available (For my use case it was components using Lazy load) then you can create serve.json in public folder with specifying source and destination.
{
"rewrites": [
{ "source": "/districts-data", "destination": "/200.html" },
{ "source": "/districts-data?*", "destination": "/200.html" },
{ "source": "/suggest-time", "destination": "/200.html" },
{ "source": "/covid-19-statistics", "destination": "/200.html" }
]
}
You also need to change your serve command to serve -c serve.json build. -c is used to tell Specify custom path to serve.json.

How to move bower dependencies into place

I have a HTML-based project and I am using a bower.json to get all the dependencies together:
{
"name": "MyProject",
"version": "0.1",
"main": "index.html",
"dependencies": {
"modernizr": "2.8.3",
"classie": "1.0.1",
"jquery": "2.1.1",
"font-awesome": "4.2"
}
}
The whole thing is in git and I don't want to checkin the bower_components directory. So I want to move the libraries into my project using some sort of script mechanism.
The situation:
I want to have the following directory structure:
index.html
css
main.css
js
main.js
lib
js
jquery
jquery.min.js
css
jquery-ui
jquery-ui.min.css
fonts
...
Some libs not only have .js files but also css as well as font files
Some libraries (e.g. font awesome) reference files within the library structure
Update
I cam up with a rake script based approach (See below). But I wonder, if there is a more elegant approach based on Javascript / NodeJS

would it be easier to use a .gitignore file?

I think its okay if you use git ignore to avoid bower_components and node_modules. but what you need there is .bowerrc file with this:
{
"directory": "app/libs"
}
with that route you can specified the destination folder.
and your bower.json
{
"name" : "test",
"version": "0.1",
"dependencies" : {
"jquery-ui" : "latest"
},
"install" : {
"path" : {
"css": "src/css",
"js": "src/js"
},
"sources" : {
"jquery-ui" : [
"components/jquery-ui/ui/jquery-ui.custom.js",
"components/jquery-ui/themes/start/jquery-ui.css"
]
}
}
}
or it can be possible as well using a task runner like grunt or gulp

I came up with the following solution, which is based on a Rake script:
desc 'Copy the bower libs to the projects sources'
task :copy_libs do
js_lib = 'js/lib'
`rm -fr #{js_lib}`
`mkdir -p #{js_lib}`
libraries = {
js: [
'jquery/dist/jquery.min.js',
'jquery/dist/jquery.min.map',
'modernizr/modernizr.js',
'classie/classie.js'
],
css: [
'font-awesome/css/font-awesome.min.css'
],
fonts: [
'font-awesome/fonts/fontawesome-webfont.woff',
'font-awesome/fonts/fontawesome-webfont.ttf',
'font-awesome/fonts/fontawesome-webfont.svg',
]
}
bower = 'bower_components'
libraries.each do |type,libs|
`mkdir -p lib/#{type}`
libs.each do |lib|
`cp #{bower}/#{lib} lib/#{type}/`
end
end
end