React application + ILC. Lesson 1

Hello everyone!

In this document, you will learn how to create a simple isomorphic React application and run it with ILC in a few minutes.

Let's get started 🚀

Get your React application ready

To build a new micro-frontend, you need a React application with SSR support.

To make things easier, you can clone the application that we've prepared for you, or start with this application running in the cloud. For the sake of simplicity, it is recommended to use the cloud version.

Don't forget to play the tic-tac-toe game before we actually get started 😎

Adapt the application to ILC

To make the application work correctly with ILC, you need to make it compliant with the ILC to App interface.

To do this, go through the source code and resolve all the //TODO: comments that were placed there for you (Hint: there are 4 of them 😉)

Once you're done, restart the application and navigate to the /microfrontend route. You should get a 200 OK response code and SSR markup as a result.

If you are facing troubles during this step, feel free to switch to the step_1-ILC_integration branch which has all the required changes already made for you.

Configure ILC to handle the application

Make sure your local ILC instance is running

To configure your micro-frontend:

1. Determine your publicPath and ssrPath:

   1. For codesandbox.io:

      • publicPath: https://xxxxx.sse.codesandbox.io/public/
      • ssrPath: https://xxxxx.sse.codesandbox.io/microfrontend

      where xxxxx are random alphanumeric characters. Check the address bar of your virtual browser.

   2. For local instance:

      • publicPath: http://127.0.0.1:5000/public/
      • ssrPath: http://<white_ip_address>:5000/microfrontend

      where <white_ip_address> is the real IP address of your machine or the one generated via services like ngrok.

      To work with ILC via ngrok, you need to create a free account at ngrok.com and obtain an authtoken.

   Examples of publicPath and ssrPath

   codesandbox.iolocal instance

   • publicPath: https://1a2b3.sse.codesandbox.io/public/
   • ssrPath: https://1a2b3.sse.codesandbox.io/microfrontend

   • publicPath: http://127.0.0.1:5000/public/
   • ssrPath: http://123.456.78.90:5000/microfrontend

   If you're using ngrok, assuming it is launched via ngrok http 5000

   • publicPath: http://127.0.0.1:5000/public/
   • ssrPath: https://12ab34cd56e7.ngrok-free.app/microfrontend

2. Update the ILC configuration:

   1. Navigate to the http://localhost:8233/nosuchpath

   2. Execute the code below in the browser console (Developer tools):

      var publicPath = 'https://xxxxx.sse.codesandbox.io/public/';
      var ssrPath = 'https://xxxxx.sse.codesandbox.io/microfrontend';
      var overrideConfig = encodeURIComponent(JSON.stringify({
      apps: {
          '@portal/myapp': {
          spaBundle: publicPath + 'client.js',
          cssBundle: publicPath + 'style.css',
          ssr: {
              src: ssrPath,
              timeout: 10000,
          },
          props: { publicPath },
          kind: 'primary',
          },
      },
      routes: [{
          routeId: 555,
          route: '/nosuchpath',
          slots: {
          body: {
              appName: '@portal/myapp'
          }
          }
      }]
      }));
      
      document.cookie = `ILC-overrideConfig=${overrideConfig}; path=/;`
      

3. Refresh the page after code execution.

   You should see your application running inside the public ILC demo website.

   

   If you can't - check both publicPath and ssrPath, and ensure that links to JS/CSS resources are correct.

Congratulations! 🎉 Now you know how to integrate your new React application with ILC.