Deployer Nuxt sur Heroku

Pourquoi Déployer Nuxt sur Heroku ?

Deployer Nuxt.js sur Heroku est une pratique récurrente pour les développeurs, car il offre une plateforme simple et flexible pour héberger des applications web modernes. Nuxt.js est un framework JavaScript qui permet de créer des applications universelles (SSR) et statiques, tandis que Heroku propose un environnement de déploiement cloud avec une interface conviviale.

Un cas d'usage concret serait le développement d'un blog ou d'une application web avec une haute disponibilité et une scalabilité automatique. Avec Nuxt.js sur Heroku, vous pouvez facilement déployer votre application et la rendre accessible à un grand nombre de visiteurs en quelques étapes simples.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissance de base de JavaScript et Node.js
• Un compte Heroku (gratuit est possible avec une adresse email)
• L'installation de Node.js 14 ou supérieur
• L'installation de Git
• Une IDE/éditeur de texte (Visual Studio Code, WebStorm, etc.)

Concepts Fondamentaux

1. Nuxt.js

Nuxt.js est un framework JavaScript pour le développement de l'interface utilisateur côté client et serveur. Il utilise Vue.js en arrière-plan et offre des fonctionnalités comme le rendu universel (SSR) et la génération statique (Static Site Generation, SSG).

// app.vue - Exemple d'un composant Nuxt.js simple
<template>
  <div>
    <h1>Bienvenue sur mon blog</h1>
    <NuxtLink to="/posts">Voir les posts</NuxtLink>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

2. Heroku

Heroku est une plateforme cloud qui permet de déployer et d'héberger des applications web en quelques minutes. Elle prend en charge plusieurs langages de programmation, dont Node.js.

## Installation du CLI Heroku (sur macOS)
brew tap heroku/brew && brew install heroku

## Connexion à votre compte Heroku
heroku login

3. Déploiement Universel (SSR)

Le rendu universel (SSR) permet à une application web d'être rendue côté serveur, ce qui améliore les performances et la référencement.

// nuxt.config.js - Configuration pour le rendu universel
export default {
  ssr: true,
}

4. Déploiement Statique (SSG)

La génération statique (SSG) permet de pré-renderiser les pages de votre application en HTML, ce qui améliore la vitesse et la sécurité.

// nuxt.config.js - Configuration pour la génération statique
export default {
  target: 'static',
}

Mise en Pratique : Projet Fil Rouge

Nous allons créer un simple blog avec Nuxt.js et déployer sur Heroku. Le projet comprendra les fonctionnalités suivantes :

• Affichage de la liste des articles
• Ajout d'un nouvel article
• Modification d'un article existant
• Suppression d'un article

Étape 1 : Création du Projet Nuxt.js

## Créer un nouveau projet Nuxt.js
npx create-nuxt-app blog

## Suivez les instructions pour configurer le projet
## Sélectionnez "Universal" pour le type de projet
## Choisissez une base CSS (par exemple TailwindCSS)

Étape 2 : Structure du Projet

blog/
├── assets/
├── components/
│   ├── Header.vue
│   ├── Footer.vue
│   └── PostList.vue
├── layouts/
│   └── default.vue
├── middleware/
│   └── auth.js
├── pages/
│   ├── index.vue
│   ├── _id.vue
│   └── new.vue
├── plugins/
│   └── axios.js
├── static/
├── store/
│   └── index.js
├── nuxt.config.js
└── package.json

Étape 3 : Configuration du Middleware

// middleware/auth.js - Vérifie si l'utilisateur est authentifié
export default function ({ store, redirect }) {
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

Étape 4 : Configuration du Store

// store/index.js - Gestionnaire d'état pour les articles
const state = () => ({
  posts: []
})

const mutations = {
  SET_POSTS(state, posts) {
    state.posts = posts
  },
  ADD_POST(state, post) {
    state.posts.push(post)
  }
}

const actions = {
  async fetchPosts({ commit }) {
    const response = await this.$axios.get('/api/posts')
    commit('SET_POSTS', response.data)
  },
  async createPost({ commit }, post) {
    const response = await this.$axios.post('/api/posts', post)
    commit('ADD_POST', response.data)
  }
}

export default {
  state,
  mutations,
  actions
}

Étape 5 : Création des Composants

<!-- components/PostList.vue -->
<template>
  <div>
    <h1>Liste des articles</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        post.title
      </li>
    </ul>
    <NuxtLink to="/new">Ajouter un nouvel article</NuxtLink>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  async fetch() {
    this.posts = await this.$store.dispatch('fetchPosts')
  }
}
</script>

Étape 6 : Création des Pages

<!-- pages/index.vue -->
<template>
  <div>
    <Header />
    <PostList />
    <Footer />
  </div>
</template>

<script>
export default {
  middleware: 'auth'
}
</script>
vue
<!-- pages/_id.vue -->
<template>
  <div>
    <Header />
    <h1>post.title</h1>
    <p>post.content</p>
    <Footer />
  </div>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const response = await $axios.get(`/api/posts/${params.id}`)
    return { post: response.data }
  },
  middleware: 'auth'
}
</script>
vue
<!-- pages/new.vue -->
<template>
  <div>
    <Header />
    <h1>Ajouter un nouvel article</h1>
    <form @submit.prevent="addPost">
      <input v-model="title" placeholder="Titre" required />
      <textarea v-model="content" placeholder="Contenu" required></textarea>
      <button type="submit">Ajouter</button>
    </form>
    <Footer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    async addPost() {
      const response = await this.$axios.post('/api/posts', { title: this.title, content: this.content })
      this.$router.push('/')
    }
  },
  middleware: 'auth'
}
</script>

Étape 7 : Configuration du Fichier nuxt.config.js

// nuxt.config.js - Configuration globale du projet
export default {
  ssr: true,
  target: 'server',
  router: {
    middleware: ['auth']
  },
  head: {
    titleTemplate: '%s - Mon Blog',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  },
  css: [
    '~/assets/styles/tailwind.css'
  ],
  plugins: [
    '~/plugins/axios.js'
  ],
  axios: {
    baseURL: 'http://localhost:3000/api'
  },
  buildModules: [
    '@nuxtjs/tailwindcss'
  ]
}

Étape 8 : Installation des Dépendances et Lancement du Serveur

## Installer les dépendances
npm install

## Lancer le serveur local
npm run dev

Erreurs Fréquentes et Debugging

Erreur 1: Error: Cannot find module 'express'

## Mauvais
// server.js - Code incorrect
const express = require('express')
const app = express()

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})
nuxt
## Correct
// server.js - Code correct
const { Nuxt, Builder } = require('nuxt')

async function start() {
  const config = require('./nuxt.config.js')
  config.dev = process.env.NODE_ENV !== 'production'

  const nuxt = new Nuxt(config)

  if (config.dev) {
    await new Builder(nuxt).build()
  }

  await nuxt.listen(process.env.PORT || 3000)
}

start().catch(err => {
  console.error(err.stack)
  process.exit(1)
})

Erreur 2: Error: Cannot find module 'dotenv'

## Mauvais
// .env - Code incorrect
API_URL=http://localhost:3000/api
nuxt
## Correct
// .env - Code correct
API_URL=https://api.yourdomain.com

## Ajouter le fichier .env dans .gitignore pour éviter de le commiter

Erreur 3: Error: Cannot find module 'node-fetch'

## Mauvais
// plugins/fetch.js - Code incorrect
export default ({ $axios }, inject) => {
  inject('fetch', async (url) => {
    const response = await fetch(url)
    return response.json()
  })
}
nuxt
## Correct
// plugins/axios.js - Code correct
import axios from 'axios'

export default ({ app }, inject) => {
  inject('axios', axios.create({
    baseURL: process.env.API_URL || 'http://localhost:3000/api'
  }))
}

Pour Aller Plus Loins

Piste 1 : Authentification avec Firebase Authentication

Firebase est une plateforme d'infrastructures cloud qui permet de construire et de mettre à l'échelle des applications web et mobiles rapidement. Avec Firebase Authentication, vous pouvez facilement ajouter une authentification sécurisée à votre application Nuxt.js.

• Tutoriel Firebase Authentication : https://firebase.google.com/docs/auth/web/start

Piste 2 : Utilisation du Store Vuex pour la Gestion de l'état

Vuex est un gestionnaire d'état pour Vue.js qui permet de gérer les états globaux de votre application. Avec Nuxt.js, vous pouvez utiliser Vuex pour stocker des données et des fonctions réutilisables.

• Tutoriel Vuex : https://vuex.vuejs.org/guide/

Piste 3 : Création d'un CLI Tool avec Nuxt.js

Vous pouvez créer un CLI tool avec Nuxt.js pour faciliter le développement et la gestion de votre application. Cela peut inclure des commandes personnalisées pour générer des composants, des pages et d'autres éléments de votre projet.

• Tutoriel Créer un CLI : https://cli.vuejs.org/guide/

Défi Pratique

Créez une application de to-do list avec Nuxt.js. L'application devra permettre aux utilisateurs de créer, modifier et supprimer des tâches. Utilisez la génération statique (SSG) pour rendre l'application accessible à un grand nombre de visiteurs.

• Ajoutez des fonctionnalités d'utilisateur : inscription, connexion et déconnexion.
• Utilisez le rendu universel (SSR) pour une meilleure performance.
• Créez des composants réutilisables pour la gestion des tâches.
• Déployez votre application sur Heroku en suivant les étapes du tutoriel.