How to share Angular MFE's secondary entry point with other remote apps - micro-frontend

We are facing an issue with respect to Angular MFE's secondary entry point.
The code base structure as below:
my-app
|---------apps
|-----shell
|-----mfe1
|---------libs
|----libA
|-----src
|-----secondaryEntryPoint1
|----ng-package.json
|----src
|-----secondaryEntryPoint2
|----ng-package.json
|----src
We have included the libA as sharedMappings in the webpack.config of both shell and mfe1 app as well these paths are referenced in tsconfig.base.json. The lib is referenced as #myapp/libA/secondaryEntryPoint1 -- This is not referred as Singleton.
We have also tried adding the shared mapping in the webpack by passing the below properties:
version,
import - (path to the respective index file)
includeSecondaries: true
As shown in the image:
Shared object
The above approach was also not working as expected and the secondary-entrypoints are initialised multiple times.

you need to share each secondary entry point explicitly in the webpack config.
If you go with #angular-architects/module-federation, you can also set
[1] https://www.npmjs.com/package/#angular-architects/module-federation#user-content-share-helper

Related

Open separate PR for each occurance of dependency with renovate

I have a repo in which I manage Terraformcode for multiple environments.
For example I would have these files:
/terraform/dev/superapp/main.tf
/terraform/prod/superapp/main.tf
In those files, I define the used providers, modules, etc. The versions of those components are identical on dev and prod.
I enabled renovate on that repo and it works almost perfectly.
But renovate will open a PR that updates the versions for e.g. the aws provider or the eks-module in dev and prod in just one PR.
But I would like to have separate PRs for each module, provider, etc and then again separate PRs for dev and prod.
So I would end up with four PRs regarding the aws-provider and the eks-module.
One for each dependency in each environment.
I checked the docs of Renovate, but I could not really find out which parameter would trigger such a behaviour, but I am sure this has to be possible.
Any help is much appreciated.
You can specify the configuration option additionalBranchPrefix to add a prefix to the branch name created by Renovate. By using parentDir or baseDir in the prefix, Renovate will split PRs based on where the package definition is located.
In your case, since the immediate parent directory has the same name (superapp), you would have to use baseDir to take into account the whole path of the file to update.
Adding this configuration in renovate.json should do the trick:
{
"packageRules": [
{
"managers": ["terraform"],
"additionalBranchPrefix": "{{baseDir}}-",
"packagePatterns": [".*"]
}
]
}
As far as I know that is not possible at the moment with renovate.
You could try and include the files/paths one by one, but I do not think that will work.

Custome load Optional Configuration file into hybris

I have read the online tutorial about Optional Configuration
https://help.sap.com/viewer/b490bb4e85bc42a7aa09d513d0bcb18e/2011/en-US/8beb75da86691014a0229cf991cb67e4.html
I know that after I set the HYBRIS_OPT_CONFIG_DIR and put [2digit number]-local.properties file into this directory, Hybris will load these files automatically.
What I want to do is that, I set up several hybris work nodes as a cluster, and every node need a different configuration because every node's role is different, one is frontend, one is backend and one is data processor.
However, due to some reason, I have to set the same HYBRIS_OPT_CONFIG_DIR value for every node, so I want to know, if there is any way to let hybris load some of properties file in this directory.
For example, I put 10-local.properties and 20-local.properties, and one node only load 10-local.properties and one node will load both of them.
I know that I can implement configuration switch by set different value of HYBRIS_OPT_CONFIG_DIR, but I hope I can find another way.
thanks
I know the question is a bit old but maybe it will help someone in the future.
I see 3 potential solutions here:
Keep common config/local.properties with node type agnostic properties and store additional node type specific properties files in separate directories. Then set HYBRIS_OPT_CONFIG_DIR to a different directory to let hybris load additional props. E.g.
/config/local.properties <- common props
/config/frontend/10-local.properties <- additional frontend props
/config/backend/10-local.properties <- additional backend props
Now setting HYBRIS_OPT_CONFIG_DIR=/config/frontend environment variable will make hybris load /config/local.properties AND /config/frontend/10-local.properties.
Use HYBRIS_RUNTIME_PROPERTIES env variable to point to an additional properties file. E.g. you could have
/config/local.properties <- common props
/config/frontend.properties <- additional frontend props
/config/backend.properties <- additional backend props
Now setting HYBRIS_RUNTIME_PROPERTIES=/config/frontend.properties environment variable will make hybris load /config/local.properties AND /config/frontend.properties.
Use useconfig system property to make hybris load a different properties file. In this case you need to setup props like this:
/config/localfrontend.properties <- frontend props
/config/localbackend.properties <- backend props
Setting useconfig system property (e.g. by using -Duseconfig=frontend) will make Hybris load ONLY /config/localfrontend.properties properties file.

How to include static files on Serverless Framework?

I'm creating a NodeJS service with serverless framework to validate a feed so I added a schema file (.json) to the service but I can’t make it work.
It seems to not be included in the package. Lambda doesn't find that file.
First I just run sls package and check the zip contents but the file is not present.
I also tried to include the file with:
package:
include:
- libs/schemas/schema.json
but still not works.
How can I make sure a static file is included in the package and can be read inside the lambda function?
It depends on how you are actually trying to load the file.
Are you loading it with fs.readFile or fs.readFileSync?
In that case, Serverless doesn't know that you're going to need it. If you add a hint for Serverless to include that file in the bundle then make sure that you know where it is relative to your current working directory or your __dirname.
Are you loading it with require()? (Do you know that you can use require() to load JSON files?) In that case, Serverless should know that you need it, but you still need to make sure that you got the path right.
If all else fails then you can always use a dirty hack.
For example if you have a file 'x.json' that contains:
{
"a": 1,
"b": 2
}
then you can change it to an x.js file that contains:
module.exports = {
"a": 1,
"b": 2
};
that you can load just like any other .js file, but it's a hack.
From what I've found you can do this in many ways:
As it is stated in another answer: if you are using webpack you need to use a webpack plugin to include files in the lambda zip file
If you are not using webpack, you can use serverless package commnad (include/exclude).
You can create a layer and reference it from the lambda (the file will be in /opt/<layer_name>. Take in consideration that as today (Nov20) I haven't found a way of doing this if you are using serverless.ts without publishing the layer first (lambda's layer property is an ARN string and requires the layer version).
If your worried about security you can use AWS Secrets as it is stated in this answer.
You can do what #rsp says and include it in your code.
For those struggling to find a solution in 2022: use package.patterns parameter. Example:
package:
patterns:
- libs/schemas/schema.json
- !libs/schemas/schema-prod.json
(! in front of the file path excludes specified pattern)
Documentation: https://www.serverless.com/framework/docs/providers/aws/guide/packaging

Where to put hiera files in puppet hiera setup

I have a running puppet master-agent setup and currently trying to figure out how to use hiera to provision php.
My Puppetfile:
forge "http://forge.puppetlabs.com"
mod "jfryman/nginx"
mod "puppetlabs/mysql"
mod "mayflower/php"
mod 'puppetlabs-vcsrepo'
mod 'puppetlabs/ntp', '4.1.0'
mod 'puppetlabs/stdlib'
My site.pp:
hiera_include('classes')
My environment.conf, where the modulepath is maintained:
manifest = site.pp
modulepath = modules:site
My hiera config on puppet master at /etc/puppetlabs/puppet/hiera.yml:
---
:backends:
- yaml
:hierarchy:
- "nodes/%{::trusted.certname}"
- "environment/%{server_facts.environment}"
- common
:yaml:
# datadir is empty here, so hiera uses its defaults:
# - /etc/puppetlabs/code/environments/%{environment}/hieradata on *nix
# - %CommonAppData%\PuppetLabs\code\environments\%{environment}\hieradata on Windows
# When specifying a datadir, make sure the directory exists.
:datadir:
From what I understand, general config that should be present on all servers goes into common.yaml. With this setup, I managed to install ntp on my node with this config at hieradata/common.yaml:
---
classes:
- 'profile::base'
ntp::servers:
- server 0.de.pool.ntp.org
- server 1.de.pool.ntp.org
- server 2.de.pool.ntp.org
- server 3.de.pool.ntp.org
Now, my hierarchy also states that all node specific config should go into hieradata/nodes/{fqdn-of-the-node}.yml.
Now, finally coming to my questions:
I have a file hieradata/nodes/myserver.example.com.yml which holds this:
classes:
- 'profile::php'
And a manifest under site/profile/manifests/php.pp:
class profile::php {
class { '::php': }
}
But this does not provision php. As you saw, I use mayflower/php from the forge.
Now, my two questions are:
Is my hiera file for php in the right location? What am I missing then to make it provision php to my agent?
You have multiple issues/possibilities here, so let us go through them iteratively.
First, you are using the default datadir of:
/etc/puppetlabs/code/environments/%{environment}/hieradata
However, you have a priority of:
"environment/%{server_facts.environment}"
This does not make sense, since you have a priority that distinguishes data for nodes based on their directory environment, but you also are placing hieradata directly in directory environments. If you want priority based on directory environment, then change your hieradata directory to be outside the direct environments at:
/etc/puppetlabs/code/hieradata
Otherwise, you should remove that level from your priority as it adds no value and will increase lookup times.
Second, you did not show your site.pp, but did you remember your hiera_include('classes')? That will lookup the array classes and then include them, which is what it seems you want. If you are not doing it, then the node provisioning issue you described would occur.
Third, is site in your modulepath? You need to append it in either your puppet.conf or your environment.conf.
Fourth, your node's fqdn may not match the certname. Check the certs directory on your Puppetmaster for the node's cert.
Side notes:
The first half of your question contains a lot of extraneous information and is missing a lot of helpful relevant information. Please consider editing the question to provide more helpful information and to be more concise.
Since ntp worked, I am assuming your module install with r10k into the environment directories succeeded. Also I am assuming that the modules are present for the directory environment of your node.
There is no real reason to specify the php class as global in your declaration with ::php.

grunt concat js / css

I have created a web site using backbone + requirejs + bootstrap on client side and php REST on server side. The site contains a lot of .js file. I use requirejs to load the .js when it is needed (to implement asynchronous loading).
However, I have start using Node.js + Yeoman + grunt + bower recently. I use Yeoman webapp generator to create the basic structure of my web again. When I build my web, it concat all the .js files into 1 single .js file and put the tag on the index.html to refer it.
From my understand the pros is that the whole .js is cached in client's browser. which is slow at first time visit, but fast on re-visit. Since everything is concat to 1 file and it is loaded to the client's browser, so I guess the asynchronous loading is not work in this case. (correct me if I wrong).
* the web site is created for both mobile and desktop. (1 src for 2 version)
Should I concat all .js files in 1 single file
OR should I use requirejs to require the .js when I need it (Asynchronous loading)?
How to config requirejs in Node. I have tried it in normal way (include the data-main in index.html, when I compile using grunt build. it give me error "... is no more support".
Is browserify similar to requirejs in Node?
I have spent a week to figure it out already but still no luck. Hope someone can point me to the right direction. Thanks a lot.
The .js file structure is something like this:
-app
-vendor
-jquery.js
-backbone.js
-assets
-js
-model
-person.js
-collection
-people.js
-router.js
-controller.js
-dist
-js
-build.js
i had familiar issues. So lets start with strategy of file concatenation. There are three major ways to follow:
first - always concat all modules in one file, in this case you loose on first start and may win or next starts, but you can face another issue - you use less then half of modules from concatenated file at a time, but always load all modules.
second way is to build specific concatenated file with specific module set for each type of page - so you know how many page type you have and build file for each - following this you can decrease size of file, but its hardly to maintain and need manual sets correction in case of page changes.
third - build 1 concatenated file with libs and modules which in use nearly on all pages, all other stuff (additional modules, views, special models and collection) load on demand. This way is good in case of SPA pages.
Let me say a few words about grunt + r.js configauration.
Keep this link for first times .
Here is the sample of config:
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond",
out: "path/to/optimized.js"
}
}
}
Main point here mainConfigFile - it is a file then you keep require.config
Next step - configure r.js - keep this link its very helpfull as describe all possibilities of r.js.
Usually its quite enough to checkout these links.
Also you can checkout recommend file structure for multi page site to avoid issues in future.
Also here is a link to a similar post - you may find it usefull.
If you have any additional questions let me know.
And a few words about CSS - logic nearlly the same : you can build separate file for each page or create sinngle. The main point here is how large your site is. In my case i've choose second option, but to be honest first one is more scalable, especially in large projects
I can get the requirejs work with Backbone now. However, I cannot use Marionette with error something like "Backbone is undefined". I've install Marionette with this command "bower install marionette --save". I did some search on google, and someone said use the AMD version of Marionette should fix this issue and after replace Marionette with AMD version it is work.
But my question is how can I install the AMD version of Marionette using "bower install"?
My web use bootstrap. When I compile the web with "grunt build". it copy bootstrap's font from "app/bower_components/bootstrap/dist/fonts" to "dist/bower_components/bootstrap/dist/fonts" but the web is refer the font on "dist/fonts". How can I change it to refer to the right directory?
I use yo webapp (with bootstrap) to generate the structure of my web.

Resources