Aujourd’hui dans ce nouvel article nous allons adapter l’excellent tutoriel de Gary Simon prévu initialement pour AdonisJs dans le contexte Nuxt.js + AdonisJs.
Pour commencer, je dois vous indiquer que le but de ce tutoriel est de créer un début d’application en mode SSR (Server Side Rendering).
Voyons à présent comment sera découpé ce tutoriel en plusieurs articles :
Sommaire du tutoriel
- Chapitre 01 – Installer Nuxt.js
- Chapitre 02 – Mise en place des templates de l’application
- Chapitre 03 – Bases de données & migrations
- Chapitre 04 – Création des modèles
- Chapitre 05 – Création des controllers
- Chapitre 06 – Authentification
- Chapitre 07 – Ajouter / Editer / Supprimer des données via l’application (à venir)
- Chapitre 08 – Conclusion (à venir)
Installer Nuxt.js
Il est d’abord nécessaire d’installer Nuxt.js. Mais, heureusement pour nous, développeurs fainéants que nous sommes :D, c’est extrêmement simple.
Pour commencer, via votre ligne de commande, vérifier que npx est disponible. Si il ne l’est pas, installez le via la commande suivante :
npm install -g npx Une fois npx installé, vous pouvez lancer l’installation de notre projet en saisissant :
npx create-nuxt-app meetthecodersAlors, un assistant se lance et vous guide pas à pas. En fin de compte, seule une connexion internet vous sera nécessaire et un peu de temps de cerveau de vos doigts, accessoirement !
Ensuite, il est temps de répondre aux petites questions indiscrètes 😉 de Nuxt pour configurer votre application :
En définitive, pour ce projet nous avons pris les options suivantes :
- Package manager : Yarn
- UI Framework : Bulma
- Server framework : Aucun, nous installerons notre serveur Adonis.js à part
- Nuxt.js modules : axios
- Linting tools : ESLint et Prettier
- Test framework : Jest
- Rendering mode : SSR Universal
- Development tools : jsconfig.json
Enfin, voici les commandes pour lancer ce projet en mode développement :
yarn devou
npm run devsi vous utilisez npm en lieu et place de yarn.
Après cela, vérifions à présent que tout fonctionne après avoir lancé notre serveur de développement (‘yarn dev’ ou ‘npm run install’) et en nous rendant à l’adresse http://127.0.0.1/3000.
Tout (c’est à dire rien pour le moment 😀 ) fonctionne !
Si vous souhaitez accéder au sources de ce mini projet, vous pouvez consulter la page du projet sur GitHub.
Pour conclure, vous pouvez être fier de vous, pour la suite, rendez vous à présent au chapitre suivant :
Chapitre 02 – Mise en place des templates de l’application
