warning

This is a preview guide and not yet generally available. Please reach out to the Noodl team at info@noodl.net if you want to give it a spin.

Deploying as a micro frontend

Micro frontends is an architecture that divides a classic monolithic SPA (Single Page Application) into smaller pieces that are decoupled from each other. Each micro frontend is developed by a different team and the decoupling enables each team to choose their frameworks and the development, testing and deploy methods that works best for them. This approach is meant to accelerate the iteration speed for each team by reducing dependencies that slow down release cycles. Another great advantage is that high performance teams of designers and developers working together using a tool like Noodl can coexist with traditional development teams or legacy technology stacks. You can read more about it here.

What you will learn in this guide

In this guide you will learn how to embed your Noodl deploys as micro frontends in an existing container application. There are generally two methods for how to do this:

• Using an IFrame for maximum isolation.
• Using the Noodl embed toolkit.

IFrame

The IFrame is an easy choice with some advantages and some disadvantages. The main advantage is that it is isolated from the rest of the application and other micro frontends. The main disadvantage (besides some generally feeling that IFrames are iffy) is that there is a noticable load and render time that you need to do some work to hide, also there might be some challenges with responsiveness. The implementation is straight forward:

<iframe src="https://my-micro-frontend-app.sandbox.noodl.app"></iframe>

You can also use the IFrame in development mode, simply pointing it to the Noodl editor. This will allow you to view your Noodl micro frontend app in the container application while editing in real time.

<iframe src="http://localhost:8574"></iframe>

This technique is more limited in terms of how you communicate with your Noodl micro frontend as the Noodl APIs are hidden within the IFrame and you need to build a messaging system. Therefor we generally recommend using the Noodl embed toolkit.

Using Noodl embed toolkit

This is the recommended approach for loading a Noodl micro frontend app into your container application.

<script src="https://cdn.noodl.net/noodl-embed.min.js"></script>
<script type="text/javascript">
Noodl.embed({
    app:'my-micro-frontend-app.sandbox.noodl.app',
    container:'#my-micro-frontend-container',
    variables:{
        myVariable:'some value'
    }
})
</script>

This will asynchronously load the Noodl runtime and application and render it under the specified container element. To avoid some load time the first time the micro frontend is rendered you can pre-load the app like this:

<script src="https://cdn.noodl.net/noodl-embed.min.js"></script>
<script type="text/javascript">
let microFrontend = Noodl.embed({
    app:'my-micro-frontend-app.sandbox.noodl.app',
    //just don't include the container
    variables:{
        myVariable:'some value'
    }
})

// Some time later when the micro frontend is visible
microFrontend.render('#my-micro-frontend-container')
</script>

Whenever you deploy to the sandbox from Noodl the micro frontend will be updated. This will allow your team to work on it's own cadence and not be limited by dependencies on other teams.

Just like with the IFrame technique you can run in development mode, connecting to the editor and seeing your Noodl micro frontend app live in the container application as you build.

<script src="https://cdn.noodl.net/noodl-embed.min.js"></script>
<script type="text/javascript">
Noodl.embed({
    app:'localhost', // Simply put localhost here
    container:'#my-micro-frontend-container',
    variables:{
        myVariable:'some value'
    }
})
</script>

note

You are free to use the Noodl sandbox deploys as much as you want for free. We do recommend them mostly for prototyping and development, when you move to production we recommend moving to a production or self hosted deploy.

Moving to production

When deploying a production micro frontend we suggest that you move to a self hosted backend (if needed) and frontend. Check out the Using a self hosted backend and Self hosting yout frontend guides for more details.

Once you frontend is deployed and connected to your production backend you can simply use the production URL in the embed function call.

<script src="https://cdn.noodl.net/noodl-embed.min.js"></script>
<script type="text/javascript">
Noodl.embed({
    app:'my-production-micro-frontend.com', // This is simply a URL to your self hosted Noodl micro frontend app
    container:'#my-micro-frontend-container',
    variables:{
        myVariable:'some value'
    }
})
</script>

All Noodl projects are kept in a Git repository making it possible to connect to a CI/CD pipeline using the Noodl Build CLI. This will allow you to trigger a deploy when you push to a certain branch in your Noodl project.