Catégories
JavaScript Vue.js

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

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

Affiliation : Jérémy Mouzin – Présentation du module algorithmique

Tu te prépares à passer bientôt des entretiens techniques d’embauche (sur CodinGame peut-être ?) ou tu as échoué lors de tes derniers entretiens ?

Ne rate plus une occasion de décrocher ton 1er job en te formant à l’algorithmique dès maintenant !
Dans ce module de 60h j’ai résolu des exercices en live sur les plateformes CodeWars et CodinGame en t’expliquant toute ma façon de penser de A à Z.

Tu apprendras la méthode DECAPI et l’utilisation du pseudo-code pour éviter le syndrome de la page blanche et résoudre n’importe quel exercice facilement.

Cette formation est unique en son genre et n’existe nulle part ailleurs sur internet, prends le temps de lire le contenu complet de ce module car il peut te permettre d’accéder enfin à ton 1er job de développeur.

Accéder au module algorithmique

Astuce budget : tu peux payer en 5 fois sans frais ! 

 

Abonnement unique O2Switch à 5€/mois

Par HappyToDev

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 e-mail 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.