Develop Salesforce Commerce Cloud Cartridge Loading Order - salesforce

I would like to develop a Salesforce Commerce Cloud Cartridge.
My JS code needs to load before all other JS Code.
What are my possibilities to achieve that? is it even possible to determine when your plugin loads?
I read about the cartridge stack load order,
Base -> Plugin -> LINK -> Custom (default).
I cannot seem to understand, is it possible to develop a Plugin or LINK cartridge? what does it require of me?

In SFCC the cartridge path and the cartridge itself has no influence on the JS code that is delivered to the client. It only defines what files take precedence during code generation on the server-side.
If you want to make sure you plugin code runs first on the client side you would have to either write a wrapper that makes all other scripts wait or add your JS code as dependency to other scripts. I doubt however that you can provide this functionality simply through your cartridge. I think whoever uses the cartridge has to take care of that manually.

Related

Loading external templates in react-templates during runtime?

How is it possible to load external templates from the server during runtime with react-templates (or other reacte template system)?
I can't find any doc's about it but noticed that some people mentioned it as answer in SO questions.
Or should I just implement it my self and use the function "dangerouslysetinnerhtml" to inject the html?
What I want to do?:
Store html/css snippets in xml (or json), that is produced/managed by a CMS and load these in a react app. It makes it very easy to change the html, or support different languages without changing the code and making a new deployment.
I have an app running that is doing exactly that, that I have made with Google GWT, and I want to do the same in the react app.

Lazy load angular modules on demand and with permission

Take a SaaS company that wants to pack all its services into a single, uhm.. Single Page Application using Angular (1). Now there is a public area (landing page, etc.) and an internal area. There are various layers of protection in the backend. There are different user groups with different privileges.
If the complete app is compiled into a single javascript file, hints for all routes can be found in the JS file quite easily. Then, there are services / $resources for interacting with the API, which again contain quite essential information on the functionality of the application.
Now the question: How could someone put modules on a certain non-binary protection level, and only load this particular module when the user is authorized to see it, all while not reloading the page?
I can find a way to lazily add modules to an angular application. I can also protect single files server sided and only send them to authorized users. But that seems like an unscalable hassle when there are more and more user groups.
Do you know any generic libraries for that purpose, ideally in sync with koa, which do not create a vast overhead? Do you know of some grunt / gulp / whatever processes, which help with that?
Thanks!
You can use latest ui.router which allows you to lazy load routes.
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#lazyload
Also you can use web pack and use multiple entry points to create seperate bundles. https://webpack.github.io/docs/multiple-entry-points.html
By following above steps you can optimise the app but I don't think that this will add any protection to the web assets. You can minify to make life bit difficult to understand what your JS code is doing.

How to protect my angular application?

I have created an angular application which uses web services to fetch data from my backend and also implementing other logical data based on user.
Since it is a client side application, the code will be visible for anyone and my logical functionalities. I am afraid that it is possible that anyone can find a loophole in my application.
Even if I minified my js files, there are many tools available to unminify it.
So is there any possible way to hide my js files from browser or some other way to avoid reading my code?
The only solution is you cant hide the javascript code from inspect. The maximum possible method is to minifiy the and uglify the code to make the code un readable. but still there are some other methods to hack it. Please look here for more details.

Don't know how to convert an Angular Web App made with nodejs to windows exe

I'm a complete noob at programming with nodejs.
I'm developing an webapp with angularjs with this structure:
So, when I run the command "nw ." with the prompt command my application loads correctly.
All I want now is transform all this structure on an single Windows executable for distribute it for my customers.
I'm looking for any solutions like Bat to Exe, APPJS, and a lot of others. But I do not have any success either.
How can I do this?
You are probably going to need to looking at use a tool like ng-template to build everything into a single package or distributing a basic web server along with your site in order to make things work.
This is mainly due to the issue with the browser not allowing XHR requests from disk as AngularJS runs and request the various html files as your views change.
The best thing is to look using a tool like ng-template to compile all of the html partials into a single .js file that can be loaded from disk along with your AngularJS app. This way AngularJS will load all your partials into the $template cache and won't have to make any XHR calls to load them.
The other possibility is to look at something simple like the Cassini Web server or something similar that you can add to your directory and launch with a simple batch file. I say this because you are talking about distributing something to people who may not have Node.js installed, meaning you probably can't rely on them being able perform a bunch of installs just to get to your app.
How to package and distribute your apps solved my problem!

AngularJS export html to pdf with css

I have a task where I need to export the html to pdf. Where the pdf should have the same design as it has in browser. Basically I need the css should also work in pdf file. Am using angularjs for front end. But I have not found any use full module or any js library which supports my requirement. I also need to update AngularJS scope variables values in pdf. I found one http://pdfmake.org/#/ but it only supports some predefined css attributes. Please provide some suggestion if there is some npm module or any js library which render the html to pdf with css.
Thank you
I am not sure if there is a fully featured JavaScript solution, which can convert HTML/CSS to PDF on client side. It makes sense to take a look to server-side solutions - there are many available.
In an "hybrid" scenario on client side you'd need to populate a HTML/CSS template with variable values, send the resulting HTML/CSS doc to the server side and to receive back a generated PDF.
In the case it is not important anymore, if the converter is written in JavaScript. You may use a standalone native applications, utilize print/PDF output subsystem of WebKit (i.e. PhantomJS) or it can be, for example, a Java module deployed to your application server (i.e. PD4ML).

Resources