Catégories
JavaScript Vue.js

Nuxt.js + Adonis.js / Chapitre 01 : Installer nuxt

(Article mis à jour le 4 octobre 2019)

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

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 meetthecoders

Alors, 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 !

Nuxt.js : Lancement de l'installation d'une nouvelle application Nuxt
Lancement de l’installation d’une nouvelle application Nuxt

Ensuite, il est temps de répondre aux petites questions indiscrètes 😉 de Nuxt pour configurer votre application :

Nuxt.js : Les différentes questions posées par l’installeur de Nuxt
Les différentes questions posées par Nuxt et les consignes post-install pour lancer l’application en différents modes

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
Nuxt.js : commandes pour lancer le projet

Enfin, voici les commandes pour lancer ce projet en mode développement :

yarn dev

ou

npm run dev

si 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.

La première version de notre application sous Nuxt.js et AdonisJs

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

Aidez nous à nous améliorer en évaluant cet article :
[Total: 0 Moyenne: 0]

Par Aldew

Absolument passionné depuis toujours par l'informatique et la programmation, je souhaite via ce blog vous faire passer un peu du savoir que j'ai accumulé depuis des années.
Et même, pourquoi pas, vous aider à faire le premier pas dans le développement web.

Vous êtes prêts ?
Alors allons y ensemble et n'oubliez pas que les débutants sont vraiment les bienvenus.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.