2

I try to use Ara Framework to implement micro-frontend. I chose Nuxt framework as my main application which "concatanate" my micro-frontends. Micro-frontend are implemented with VueJs framework.

Here is one of my micro-frontend (in VueJs) which implement a pretty simple component :

ResumeFournisseur.vue:

<template>
    <b-row>
        <b-col cols="3">
            <div>
                LOGO
            </div>
            <div>
                <label>Choisissez votre fournisseur :</label>
                <select name="supplier" v-model="sellerSelectedValue">
                    <option v-for="fournisseur in fournisseurs"
                            :key="fournisseur.id"
                            v-bind:value="fournisseur.id">
                        {{ fournisseur.name }}
                    </option>
                </select>


                <button class="u-btn u-btn-primary">Voir les produits</button>

            </div>
        </b-col>
        <b-col cols="9">
            <h1>{{ sellerSelectedLabel }}</h1>
        </b-col>
    </b-row>
</template>

<script>
    export default  {
        name: 'ResumeFournisseur',
        props: {
            supplierId: String
        },
        data() {
            const fournisseurs = [
                {
                    id: -1,
                    name: 'Aucun fournisseur'
                },
                {
                    id: 1,
                    name: 'Renault'
                },
                {
                    id: 2,
                    name: 'Acial'
                }
            ];
            return {
                sellerSelectedValue: fournisseurs[0].id,
                fournisseurs : fournisseurs,
                sellerSelectedLabel: fournisseurs[0].name,
            }
        },
        mounted() {
            if (typeof this.supplierId != 'undefined'){
                this.sellerSelectedValue = this.supplierId;
            }
        },
        watch: {
            sellerSelectedValue: function () {
                const recup = this.fournisseurs.filter(four => four.id == this.sellerSelectedValue);
                this.sellerSelectedLabel = recup[0].name;
            }
        }
    }
</script>

And here my index.js file :

import hypernova from 'hypernova/server'
import {renderVuex, renderVue, Vue} from 'hypernova-vue/server'
import express from 'express'
import path from 'path'

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

//import createStore from './store/modules/listComponent'
import ResumeFournisseur from './components/ResumeFournisseur';

Vue.use(BootstrapVue)

hypernova({
    devMode: process.env.NODE_ENV !== 'production',
    getComponent(name) {
        switch (name) {
        case 'ResumeFournisseur' :
            return renderVue(name, Vue.extend(ResumeFournisseur));
        }
    },

    port: process.env.PORT || 3001,

    createApplication() {
        const app = express()

        app.use('/public', express.static(path.join(process.cwd(), 'dist')))

        return app
    }
})

Then in my Nuxt application I do :

<template>
  <b-container fluid>
    <div>
        <nova name="ResumeFournisseur" :data="{}"/>
    </div>
  </b-container>
</template>

<script>
import Nova from "nova-vue-bridge";
import NovaClusterService from "../middleware/novaClusterService";

export default {
    components: {
        Nova
    },
    head () {
        return {
            title: 'Accueil',
            script: [
                { src:
                        'http://localhost:3001/public/client.js'
                }
            ]
        }
    }
}
</script>

It works pretty good.

But when I tried to use Nova Cluster aggregator combined with Nova Proxy, I don't know how to render my micro-fontend in my Nuxt application without using the http://localhost:3001/public/client.js. Here my views.json file :

{
  "ResumeFournisseur": {
    "server": "http://localhost:3001/batch"
  }
}

And here my nova-proxy.json file :

{
  "locations": [
    {
      "path": "/",
      "host": "http://localhost:3000",
      "modifyResponse": true
    }
  ]
}

(for remember, Nuxt is running on 3000 port). I run ara run cluster --config ./views.json (as the documentation said). Then I run

set HYPERNOVA_BATCH=htpp://localhost:8000/batch
ara run:proxy --config nova-proxy.json

As I'm on Windows environnement I do a set. When I make a post on nova cluster like :

{
  "ResumeFournisseur": {
    "name": "ResumeFournisseur",
    "data": {
    }
  }
}

It makes a good response. Pretty good !! But nova proxy doesn't do anythning :(. Documentation said that if it's bound to nova cluster (thanks to HYPERNOVA_BATCH variable) it will able to render the views rendered by nova cluster.

Of course, if I embed the cluster reponse in a v-html directive (in my NuxtJs main application), the micro-frontend is embeded but is not doing anything (not interactive).

Am I missing something ?? I read a lot of documentation of this subject, and I'm doubting on my choices/understanding.

If there's anyone who could help me, it's could really great :) !!!

Duplouy
  • 21
  • 2

1 Answers1

0

Finally, I found my missunderstanding. I have to go to http://localhost:8080 on my browser and it will call the nova proxy which calls himself the nova cluster. In fact, you can't remove the client.js use, because thanks to that you got your business side.

I found an article on stackoverflow about this subject.

Duplouy
  • 21
  • 2