Any Next.js examples?

[joel1st]

This looks like a really cool project! Just curious if there are any example projects which use Next.js SSR? If not can you see any issues with setting up a Next.js microfrontend?

[nightnei]

Unfortunately, we don't have any example projects with Next.js, but generally, I don't see any problems.

BTW I would recommend you create PoC based on ilc-demo-apps - I believe it has to be interesting for you 🙂. It's a chance to try ILC in action, and I think your team will be happy to see some PoC (talk is cheap, show me the code. (c) Linus Torvalds 😄). And additionally - we appreciate any contribution, so we will be grateful if you decide to send PR to ilc-demo-apps with your demo app, which uses Next.js 🙂

[joel1st]

I have tried running the demo with docker run --rm -it -p 8234-8240:8234-8240 namecheap/ilc-demo-apps and then navigating to http://127.0.0.1:8234/. The wrapper loads, but when I click "Mount actual app" nothing happens.

I am getting these logs from the docker container (when the page loads - no additional logs when I click the button though):

[nightnei]

it's expected that microservice doesn't work without ILC context. you should: 1) run ILC locally - download the repo and run it via npm run start:no-apps, this task run ILC w/o demo-apps and it means that demo-apps will be run locally by developer. 2) the next step to run ilc-demo-apps locally - recommended to pull the repo and run it (npm run dev), since it will be necessary to add a new microservice which uses Next.js Result: ILC is run locally, ilc-demo-apps too, so open http://localhost:8233/ to see everything in action :) 3) open - http://localhost:8233/

At additionally I would recomend you to look at our lessons :) http://ilc.namecheap.technology/docs/how-to-guides/react/lesson1/

[joel1st]

Hey @nightnei thanks for the response :)

Following those instructions, I am getting this screen:

In the ILC logs the only error I get is this:

[ilc] {"level":50,"time":1653086529864,"pid":9867,"hostname":"joel-G5-5500","type":"FragmentError","message":"Non-primary \"navbar__at__navbar\" fragment error while processing \"/\"","stack":["FragmentError: Non-primary \"navbar__at__navbar\" fragment error while processing \"/\"","    at Tailor.handleFragmentError (/home/joel/code/microfrontend/ilc/ilc/server/tailor/error-handler.js:44:42)","    at Tailor.emit (node:events:520:28)","    at Fragment.<anonymous> (/home/joel/code/microfrontend/ilc/ilc/node_modules/tailorx/lib/request-handler.js:238:30)","    at Object.onceWrapper (node:events:640:26)","    at Fragment.emit (node:events:520:28)","    at /home/joel/code/microfrontend/ilc/ilc/node_modules/tailorx/lib/fragment.js:162:22","    at processTicksAndRejections (node:internal/process/task_queues:96:5)","Caused by: FragmentRequestError: Error during SSR request to fragment at URL: http://localhost:8235/","    at ClientRequest.<anonymous> (/home/joel/code/microfrontend/ilc/ilc/server/tailor/request-fragment.js:130:24)","    at ClientRequest.emit (node:events:520:28)","    at Socket.socketErrorListener (node:_http_client:442:9)","    at Socket.emit (node:events:532:35)","    at emitErrorNT (node:internal/streams/destroy:157:8)","    at emitErrorCloseNT (node:internal/streams/destroy:122:3)","    at processTicksAndRejections (node:internal/process/task_queues:83:21)","Caused by: Error: connect ECONNREFUSED 127.0.0.1:8235","    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1157:16)"],"additionalInfo":{"fragmentAttrs":{"id":"navbar__at__navbar","appProps":{},"wrapperConf":null,"spaBundleUrl":"http://localhost:8235/navbar.js","url":"http://localhost:8235/","async":false,"primary":false,"public":false,"timeout":1000,"returnHeaders":false,"forwardQuerystring":false,"ignoreInvalidSsl":false}},"causeData":[{},{}]}

In the ilc-demo-apps I get these errors:

[nightnei]

Have you done every step here - development process? Looks like you forgot 3-rd step (Run npm run build:all)

And JIC ILC related information about running is here.

[joel1st]

@nightnei That fixed it, (I was just following your steps above). Thanks. We should be doing a proof of concept in the next few weeks. If we get next.js working I will put up a PR :)