# Comment intégrer ma PWA

# Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement avoir internationalisé notre application.

# Introduction

Notre but est de livrer notre PWA dans le fichier .app généré. Pour cela nous devons :

• Indiquer à Nuxt.js d’exporter le site dans le dossier public d’Anakeen Platform 4.
• Indiquer à Anakeen Platform 4 de charger la page d’accueil générée par Nuxt.js lors de l’accès à l’application.

# Comment configurer Nuxt.js pour exporter le site au bon endroit

Modifier le fichier nuxt.config.js :

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: "static",
  components: true,
  css: ["@/assets/css/bootstrap.scss", "@/assets/css/kendo.scss", "@/assets/css/main.scss"],
  modules: ["@nuxtjs/proxy", "@nuxtjs/i18n"],

  proxy: {
    "/locale/catalog.json": {
      target: "http://localhost:8080",
    },
    "/api/v2/**": {
      target: "http://localhost:8080",
    },
  },

  i18n: {
    locales: [
      { code: "en", file: "en.js" },
      { code: "fr", file: "fr.js" },
    ],
    strategy: "no_prefix",
    defaultLocale: "fr",
    langDir: "~/locales/",
  },

  generate: {
    dir: "./src/public/restauratec/",
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    publicPath: "/restauratec/_nuxt/",
  },
  hooks: {
    generate: {
      before(generator) {
        // Reaffect custom dist nuxt path to avoid public path duplication
        generator.distNuxtPath = generator.distPath + "/_nuxt/";
      },
    },
  },
};

Lancer ensuite la commande :

npm run generate

Vous pouvez vérifier que le site est généré sous src/public/restauratec :

src/public/restauratec
├── 200.html
├── index.html
└── _nuxt
    ├── 058bd55.js
    ├── 0c93d36.js
    ├── 0f1cb29.js
    ├── 1908dd3.js
    ├── 1d9fcdd.js
    ├── 1efc118.js
    ├── 23dd4dc.js
    ├── 2c3286b.js
    ├── 32f8b4a.js
    ├── 405ad4b.js
    ├── 461b471.js
    ├── 5432128.js
    ├── 6564d88.js
    ├── 885d439.js
    ├── 9cbed0f.js
    ├── a065d60.js
    ├── cc8f40b.js
    ├── ea25f9c.js
    ├── f4a9966.js
    ├── fonts
    ├── img
    └── LICENSES

# Comment indiquer la page à charger à la racine pour Anakeen Platform 4

Nous allons surcharger la route portant sur l’url / pour remplacer par la page d’accueil standard par la page d’accueil de notre PWA.

Pour cela, modifions le fichier src/vendor/Cogip/Restauratec/Config/110-RestauratecRoutes.xml:18 :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<sde:config xmlns:sde="https://platform.anakeen.com/4/schemas/sde/1.0">
  <sde:routes namespace="Core">
    <sde:route-override name="Root">
      <sde:callable>Cogip\Restauratec\Routes\Main</sde:callable>
      <sde:authenticated>false</sde:authenticated>
    </sde:route-override>
  </sde:routes>
  <sde:routes namespace="Cogip">
    <sde:route name="changeLocale">
      <sde:callable>Cogip\Restauratec\Routes\ChangeLocale</sde:callable>
      <sde:method>POST</sde:method>
      <sde:pattern>/api/v2/restauratec/changeLocale</sde:pattern>
      <sde:description>Change the locale of the application</sde:description>
    </sde:route>
  </sde:routes>
  <sde:accesses namespace="Cogip"/>
</sde:config>

Modifier ensuite le fichier src/vendor/Cogip/Restauratec/Routes/Main.php :

<?php

namespace Cogip\Restauratec\Routes;



/**
 * Example route
 *
 * @note Used by route Core:Root
 */
class Main
{
    /**
     * @param \Slim\Http\request $request
     * @param \Slim\Http\response $response
     * @param $args
     * @return mixed
     */
    public function __invoke(\Slim\Http\request $request, \Slim\Http\response $response, $args)
    {
        return $response->write(file_get_contents($this->getIndexFilePath()));
    }

    private function getIndexFilePath() {
        return PUBLIC_DIR . "/restauratec/200.html";
    }
}

# Tester nos modifications

Lancer le serveur Anakeen Platform 4 :

make env-start

Réinstaller l’application avec la commande :

make reinstall

Vous pouvez alors accéder au site sur l’url http://localhost:8080/ :

# Livrer l’application

Vous pouvez maintenant livrer l’application en suivant le How To correspondant.

# Et ensuite ?

Bravo vous avez terminé ce How To sur la PWA ! 🎉