Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Feb 02 2020 12:39
    HeReleased Piral v0.10.0
  • Feb 02 2020 12:36
    Hello!
  • Feb 02 2020 12:06
    Hello!
Mats Oftedal
@TheOftedal

Hi, I wish to segregate the dependency for Piral from a Pilet and inject a custom PiletApi wrapper in the Pilet setup function.

import { CustomApi } from "custom-piral-framework";

export function setup(app: CustomApi) {
  app.someFunction();
}

What I want to achieve with this is to remove the access to the Piral core API functions and instead provide a custom wrapper such that Pilet developers will only have access to a custom implementation of the core API functionality. I do not want Pilet developers to have direct access to registerPage/registerTile/etc. but instead wrap this functionality in a custom "registerApp" function.

I have looked at custom plugin injection following the tutorial at Customizing the API as well as looking at the issue smapiot/piral#332.

Is it possible to intercept the call to the Pilet setup function and inject a custom typed PiletApi instead?

15 replies
Manjeet Roy
@roy_manjeet123_twitter
How can we create forms in any pilet? Steps i followed till now : 1. install npm i piral-forms 2: import { createFormsApi } from 'piral-forms' in index.tsx of pilet. Now how to use this createFormsApi?
2 replies
Jan Eirik Forland
@janforland
Hi, I have a weird issue. We are currently using piral@next with webpack5 (v1.0.0-pre.2104). I have a dependency in my appshell to @hookforms/resolver, and I have also marked it in the "externals" part of the pilet configuration in package.json. For some reason, I get an error from piral-core/dependencies.codegen saying it can't resolve @hookform/resolvers, even though I have a few other deps that are set up exactly the same. Any ideas?
39 replies
Jan Eirik Forland
@janforland
@TheOftedal :beer:
1 reply
Shahrukh Shahid
@sskhokhar
How can i access piral api globally? i.e anywhere in the entire pilet
2 replies
Shahrukh Shahid
@sskhokhar
What are these values in package.json of piral-shell. I couldnt find anything about this in docs
"pilets": {
        "files": [],
        "externals": [
      // this is used to share deps
        ],
        "scripts": {},
        "validators": {},
        "devDependencies": {},
        "preScaffold": "",
        "postScaffold": "",
        "preUpgrade": "",
        "postUpgrade": "",
        "packageOverrides": {}
    }
1 reply
Shahrukh Shahid
@sskhokhar
image.png
I just scaffolded piral shell and its giving me this error. My piral version is latest though
1 reply
Shahrukh Shahid
@sskhokhar

Im using redux-dynamic-modules to setup redux stores.
My strategy is
1- Shared redux store in Piral Shell to be accessible in every pilet
2- Individual pilets stores.

It's been a week since im trying to get around this error.

Problem: I tried everything to export the actions from shared redux store but those are not accessible in scaffolded pilet. For instance im getting following error Error while setting up pilet. TypeError: (0 , _frontendShell.addNotification) is not a function while running "https://github.com/piral-samples/piral-core-redux-saga-demo" this demo in Lerna mono-repo system with updated piral

Any help would be highly appreciated
Here is the link to test repo: https://github.com/sskhokhar/piral-test

7 replies
Manjeet Roy
@roy_manjeet123_twitter
How can we use css file in a pilet, tried making index.css in src folder of pilet and imported it in index.tsx file but seems its not working as nothing is diplayed when do pilet debug.
16 replies
Jan Eirik Forland
@janforland
Is the AxiosError type exported from piral-axios? I can't seem to find it
4 replies
Benjamin Schwendner
@BenjaminSchwendner
Hi Florian!
I've encountered an issue with the way how detectYarn (https://github.com/smapiot/piral/blob/ef3c6274568822db4b8ccc95297254d05b0c7c0c/src/tooling/piral-cli/src/common/npm.ts#L35) works:
In case you have a mono-repo using only yarn workspaces, without Lerna, the function fails to detect yarn, since the yarn.lock is not sitting on the root of the package but on the root of the workspace.
I think it would be better to use basically the same discovery process you already use to find the lerna.json.
9 replies
Andras Hatvani
@andrashatvani
hey everyone, my application shell integrates with keycloak and thus even if i only want to debug/test a single pilet i still have to start docker and a lokal keycloak instance in order have the pilet up and running. does somebody have a suggestion how to simulate/mock/disable keycloak for development purposes?
for completeness, the App.tsx of the shell is as follows:
const App: React.FC = () => {
    const [visible, setVisible] = useState(false);
    const RENDER_STATES = ['onReady', 'onAuthSuccess', 'onAuthRefreshSuccess', 'onTokenExpired'];

    const handleKeycloakEvent = (event: AuthClientEvent, error: AuthClientError | undefined) => {
        setVisible(RENDER_STATES.includes(event));
    };

    return (
        <ReactKeycloakProvider
            authClient={keycloak}
            initOptions={{pkceMethod: 'S256', onLoad: 'login-required'}}
            LoadingComponent={<LoadingIndicator type="app"/>}
            onEvent={handleKeycloakEvent}>
            {visible && app}
        </ReactKeycloakProvider>
    );
};

export default App;
3 replies
Jan Eirik Forland
@janforland
@FlorianRappl : When using Piral Cloud feed, I get an error that says "The current requester is not allowed to access this resource." In allowed hosts I've entered http://localhost:1234... Is that not supported? In other words: Can we not use the piral feed when developing locally?
3 replies
Jan Eirik Forland
@janforland
@FlorianRappl : I have a pilet with an async function, which first of all checks (via plugin exposed by the appshell) if a user is logged in or not. If he/she is logged in, then a certain tile is registered, if not another tile is registered. I have also set up, in the setup function, and event listener for a "change-user" event, which if the user logs out, the logged-in tile is unregistered, and not-logged-in tile is registered. First of all, does this sound reasonable, or should I just register both tiles, and let the tiles themselves find out if it should show itself? Second, I have an issue with this tile registering/unregistering. It seems like the wrong tile is shown after the user logs out, even though the registry in the state does not contain that tile. If I then refresh, the page looks correct. But, this does seem to happen each time a user logs in/out. The wrong/previous tile hangs around, even if I can't find it in the registry. Is there some weird caching issue going on?
13 replies
Jan Eirik Forland
@janforland
Ok, so I could just improve my plugin using this Strategy, and hopefully Get a better result :smile:
2 replies
By trust I maen that the current global state may, in some cases, actually not reflect the «current» state, ie the state you would think. So, it’s not to be blindly trusted
Ok, I’ll try. But, to me it seems like «old» state could suddenly reappear if many events are triggere around the same time (if they manipulate state)
Jan Eirik Forland
@janforland
Anyone getting the script injector of Kras to work? I find the documentation to be lacking. How do we set this up in a Pilet for mocking API requests?
1 reply
Sandeep kanthappa
@Skanthappa
Hi Team, How do we redirect from one pilet to another pilet?
For ex: in pilet 1, we have registered /about route and its component present.
In pilet 2, we have registered /Info route.
Now in pilet 2 i have button on click i need to redirect to /about page.
FYI- i am using react appln. can i use histroy.push(/about)? Any reference appln example that i can refer for routing between different pilet?
3 replies
felixamerbauer
@felixamerbauer
Hi Team!
What's the preferred way to pass zone specific settings to the application shell? For example the URL of the feed service. Optimally this would not require rebundling the application shell for each zone.
Any help is appreciated
4 replies
Aabhash Tiwari
@Aabhash97
Can we use PiletAPI instance into some other React Component other than index.tsx of my-pilet.If yes , is there any GIT reference for that?
7 replies
Aabhash Tiwari
@Aabhash97
Hi Team, I am using a UI Toolkit in my piral instance,do we have to install the dependencies in the pilets if we want to use the same toolkit Or pilet has to take any dependencies from piral instance ?
4 replies
Shahrukh Shahid
@sskhokhar
.env file aren't being read by piral or pilet by default, any solution for it?
As a workaround in piral-shell im using webpack-dotenv with custom webpack file.
6 replies
cstampfel
@cstampfel

Hey everyone, I'm experimenting with keycloak integration in the application shell. Is there a recommendation how we can integrate keycloak?
Should we use the piral-oidc plugin or keycloak-js in combination with a custom extension of the Pilet API?

I'm asking because I have some troubles integrating piral-oidc plugin with keycloak.
Especially i get an endless redirect loop if i integrate keycloak with the following code:

index.tsx

client.token()
    .catch(reason => {
        console.error(reason);
        client.login();
    });

client.handleAuthentication()
    .then(async ({ shouldRender }) => {
        if (shouldRender) {
            render(<App/>, document.querySelector('#app'))
        }
    })
    .catch(async (err) => {
        console.log('Login error');
        console.log(err);
        client.logout();
    });

piral-application.tsx

...

export const client = setupOidcClient({
    clientId: (window as any)._env_.KEYCLOAK_CLIENT,
    identityProviderUri: (window as any)._env_.KEYCLOAK_URL,
    appUri: location.origin,
    redirectUri: location.origin,
    signInRedirectParams: {
        state: 'successful'
    }
});

const config = {
    plugins : [
        createOidcApi(client)
    ]
};

const {app, instance} = getAppInstance(config, {layout: piralApplication, errors});
export {app, instance}

...

env-config.js

window._env_ = {
  KEYCLOAK_URL: "http://localhost:8126/auth/realms/myrealm",
  KEYCLOAK_CLIENT: "myrealm-frontend"
}
1 reply
Jan Eirik Forland
@janforland
@FlorianRappl: We have an issue with piral-cli-webpack5! The dependency in this package to html-webpack-plugin@next does not exist. It seems like html-webpack-plugin with next is removed from NPM
26 replies
Ioan Stoianov
@IoanStoianov
Hey guyz, I am trying to run Piral with Angular but I struggle finding recent documentation and with the current one I can't run it. Do you have any suggestions on how to do it?
6 replies
Januar Himantono
@himantono_gitlab
@FlorianRappl Hi Florian, we have some difficulties to set up local debug of piral-pilet application. We have app-shell with multiple pilets. Only one pilet is loaded at a time. The pilet is loaded dynamically. When we try to debug one of the pilet, we also want to be able to switch to the other pilets which are not under debugging. As now the appshell will try to load all the pilets from localhost. We try to play with "Load available Pilets" on the debug settings. When we enable that, the application is working well with all the pilets not loading locally. So it seems that is all or nothing. How can we configure only to load one specific pilet from loacl host and the others not. Thank you in advance.
19 replies
Nata Cortes
@natacortes14_twitter
Hi! I’m not sure if this is the right place to write this, but I got some questions. The thing is that I want to make a web that works something like Google. What I mean with this is: a big application that holds a unique login page, and can use some different applications inside. I haven’t tried Piral yet, but looks great for what I want to do. In the Google example, looks like the Google site could be the Piral Instance, and the applications (drive, gmail, photos, etc) could be the Pilets? Sorry if I’m asking all this here, but I need to choose a framework right now, to implement my project soon. Ok, now: Does Piral supports:
  • Global routing (Piral instance router)?
  • Pilet routing (a router managed from the Pilet using React/Angular/Vue)?
  • A whole frontend app made in React, not just a component (like a whole gmail inside the google site)?
  • Can each Pilet work alone (I want to remove gmail from Google and then use it as a single site, or just develop a single site, and then integrate it into the Piral)?
  • A state to share information between apps (like google session)?
  • Lazy load (I don’t need to download bundles for drive site, if I’m just using gmail)?
  • Use of frameworks like Stencil, to implement shared components that can be used in any framework/library.
  • An existing React/Angular/Vue app can be migrated to a Pilet and use them easily?
1 reply
Jan Eirik Forland
@janforland
@FlorianRappl piral-cli@1.0.0-pre.2137 seems to always build emulator mode, even though --type=release. Any bugs introduced in this pre-version?
95 replies
Rahul Pandey
@rahulpandey8920
Hi @FlorianRappl , the piral framework is great! I have a question regarding high availability and disaster recovery of the Piral Instance (App Shell) and the Feed Service. As all the pilets are dependent on these core components it becomes crucial for these components to be robust and reliable. Are there any piral specific recommendation or guidelines on this in addition to the usual patterns for any web application ?
3 replies
Jan Eirik Forland
@janforland
@FlorianRappl: How can I implement scroll to top functionality when the route changes? Normally, we would make a component which is mounted right inside the Router-component from react-router, but that is not available to us. Any ideas?
4 replies
Jan Eirik Forland
@janforland
@FlorianRappl: How can we type (in TypeScript) the params for a given extension?
7 replies
Robin
@Robbson
Hello,
I wonder how enums can be used in a custom Pilet API. I want to restrict the allowed values for specific parameters. Piral seems to prefer union types (like the MenuType in the Menu API) so they can be easily extended. But their usage is different from enums because you always have to pass the value directly. Unfortunately enums don't work. As soons as a pilet tries to use an enum entry defined in the Piral instance like Layout.MyFirstLayout, I get an error about a not allowed direct access to the Piral instance.
Is there a specific reason why exported enums can't be used from the Pilets?
14 replies
Andras Hatvani
@andrashatvani
Hi, we have several pilets which connect to their corresponding backends and it works locally. however, when running on stage or in production, the backend services which are located in k8s should each have a url which is publicly accessible for the web app which is running on the client.
do you have any recommendation for a proxy/router for this setup to only have to expose one single url?
3 replies
Andras Hatvani
@andrashatvani
Hi, when running pilet debug the node process consumes constantly 99% cpu ie one core is fully utilized - does anyone have a suggestion how to reduce the cpu utilization?
5 replies
Robin
@Robbson
Hello, I have a pilet which does some configuration of the app shell that is required for all other pilets to work properly (e.g. a shared component). In a production environment it would be loaded along the other pilets and all is fine. But what about local pilet development? How can I tell the app shell emulator to load another pilet next to my pilet-code? The only way I currently know of is to change the app-shell code to always get this pilet statically from a local resource. But I don't want to change the app shell code nor include a static resource for a specific usage scenario. Any alternative ideas?
11 replies
ulkapw
@ulkapw
Hi, when I use the plugin prial-pwa, I get the error that the module parcel-bundler cannot found. As bundler I use webpack. My plugin and piral version is 1.0.0-pre.2137. Any ideas how to fix that?
> piral debug
🚀 Running at http://localhost:1234
🔧 Manage via http://localhost:1234/manage-mock-server
(node:22512) UnhandledPromiseRejectionWarning: Error: Cannot find module 'parcel-bundler'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/kasper/_project/nin/node_modules/piral-pwa/generators/worker.codegen:1:17)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
(node:22512) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:22512) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
3 replies
Andras Hatvani
@andrashatvani
hi, does sharing dependencies work with devDependencies? i only could make it work with standard dependencies
https://docs.piral.io/guidelines/tutorials/15-share-dependencies
2 replies
Robin
@Robbson
Hi, can I publish a pilet in a npm repository and consume it as a dependency in the app shell? I know, this sounds very strange and it would result in a monolith frontend. But we have a scenario where we are not allowed to host additional services like the pilet feed service at the moment. The Micro-Frontends / pilets are already developed in separate projects using the Piral emulator and the Pilet API. The idea is to have a temporary monolith until we have clearance for the feed-service. Migration would be a lot easier then because of the same API.
48 replies
Sandeep kanthappa
@Skanthappa

Hi, i am installing "piral-cli": "^0.12.4", "piral-cli-parcel": "^0.12.4" . piral-cli-parcel installing parcel-bundler. When i trying to build using piral build commant i am getting exception "Invalid Version: undefined" as in https://stackoverflow.com/questions/66459081/parcel-semver-bug
below is the npm tree for piral parcel.

piral-cli-parcel@0.12.4
└─┬ parcel-bundler@1.12.4
└── @babel/preset-env@7.13.10
Could you please suggest me how to resolve the issue.
I tired to lower the version but it doesn't help me.

6 replies
Jonathan Sullivan
@MotivatedCreation

Hello,

I'm trying to manage releases of my piral instance using semantic-release. The @semantic-release/npm plugin requires the unbundled package directory. However, when building the emulator the piral-cli automatically creates a tarball, which forces me to include code to decompress it.

What is the best way to handle this scenario? Is there a way to prevent the piral-cli from creating a tarball of the emulator?

5 replies
Ariel Felipe Camacho Díaz
@arielf-camacho
Hi, guys, I'm experiencing a problem with piral.cloud. After I sign in, I'm taken back to the Authentication page, and the cycle continues. But still mi app is working, meaning, my pilets are there are accessible. Is anyone experiencing the same? Thanks in advance for your help.
11 replies
Jan Eirik Forland
@janforland
Hi. I'm trying to add a Pilet using the Piral extension for Chrome. What I'm trying to do, is load a local Pilet packaged using pilet pack, but I get a 404 from https://assets.piral.io/temp. Any ideas? @FlorianRappl?
10 replies
Jan Eirik Forland
@janforland
@FlorianRappl: I've registered a couple of extensions in one Pilet, and are using them in another Pilet. But, for some reason, the extensions are rendered twice. Any ideas as to why?
7 replies
Dante De Ruwe
@DanteDeRuwe

Hi Piral community. Recently, I created a Netflix clone using Piral!

https://dev.to/dantederuwe/my-experiences-creating-a-netflix-clone-using-microfrontends-1n46

In this article, I share my experiences creating a project by myself using React and Piral: two technologies I had previously never touched. I will cover what I did, and how I did it. Finally, I will present some closing thoughts, opinions, and personal notes about this endeavor.

It would mean a lot to me if some of you took a look at the article! Feel free to leave me some feedback in the comments, too!

1 reply
Fabriece Sumuni
@sfabriece
@FlorianRappl, feed contributors page is stuck on the loading screen in piral.cloud. Is this a known issue?
3 replies
MarioGit1
@MarioGit1
@DanteDeRuwe, thank you for working on piral-blazor. Maybe i've missed the point, but the npm "blazor" package is just in version 3.2.1-pre.20210301.4. Shouldn't there be all versions of .net or should i create my own package for .net5? Thanks.
1 reply
franklinjose
@franklinjose
As you see in the snap shot we have Global state available under main react root tree. Since our app is not fully react we have multiple react roots and how can bridge context between two or more react root trees?
image.png
3 replies
Dan Bock
@danbockapps

Hello! I'm trying to follow the instructions to migrate a CRA app into a Piral app shell: https://docs.piral.io/guidelines/tutorials/20-migrate-app#create-react-app-into-app-shell

Two questions.

  1. How do I extend the webpack config? Looks like CRA doesn't provide a way to do that, but there are a few third party libraries that can. Do I need one of those?
  2. After I follow the steps, what do I do? Do I add a call to renderInstance in my index.tsx, replacing ReactDOM.render? To do that, don't I need to install piral in addition to piral-core?

My team is very excited about Piral, but it will really be a slam dunk if we can avoid ejecting from CRA!

11 replies