Deployer Nuxt sur Railway

Pourquoi Deployer Nuxt sur Railway ?

Deployer Nuxt sur Railway est une pratique courante pour les développeurs car il permet de transformer facilement un projet Nuxt.js en application web accessible publiquement sur Internet. Cela peut être utile pour diverses raisons :

• Exposition rapide : Vous pouvez déployer votre application Nuxt.js rapidement et partager son URL avec d'autres, sans avoir besoin de prendre soin d'un serveur physique ou une infrastructure complexe.
• Economies de temps : En utilisant Railway, vous n'avez pas à gérer la mise en place et le maintien de l'environnement de production. Cela vous permet de se concentrer sur le développement et l'amélioration continue de votre application.
• Facilité d'échelle : Railway s'intègre facilement avec des services comme GitHub, ce qui facilite le processus de mise en œuvre continue (CI) et d'intégration continue (CD).
• Coût réduit : Pour les petits projets ou pour ceux qui ne gagnent pas beaucoup d'users, Railway offre un plan gratuit qui est généralement suffisant.

Un cas concret serait de développer une application de gestion de tâches personnelle. Après avoir créé et testé l'application localement sur votre machine, vous pouvez la déployer facilement sur Railway pour que tous puissent y accéder via Internet.

Prerequis

Avant de commencer à déployer votre projet Nuxt.js sur Railway, il est important d'avoir certaines compétences et d'outils en place :

• Connaissance de base de Nuxt.js : Vous devez comprendre les concepts de base de Nuxt.js comme la structure du projet, les routes, les composants, etc.
• Connaissance de Git : Comprendre comment utiliser Git pour gérer votre code et le déployer sur Railway.
• Comptes d'inscription à GitHub et Railway : Vous aurez besoin de comptes sur ces deux plateformes pour suivre le processus.

Outils à installer

• Node.js (version recommandée : 14.x)
• npm ou yarn
• Git

Vous pouvez vérifier la version d'Node.js et npm en utilisant les commandes suivantes :

node -v
npm -v

Si vous n'avez pas installé Node.js et npm, vous pouvez le faire à partir du site officiel de Node.js.

Concepts fondamentaux

1. Comprendre les concepts de base

Avant de commencer à déployer votre projet, il est important de comprendre quelques concepts clés :

• Composants Nuxt : Les composants sont des éléments réutilisables qui peuvent être inclus dans d'autres composants ou pages.
• Routes Nuxt : Les routes définissent comment les URL correspondent aux fichiers et aux composants.
• Middleware Nuxt : Le middleware est utilisé pour effectuer des tâches avant ou après la gestion d'une requête.

2. Structure du projet

La structure de base d'un projet Nuxt.js ressemble à ceci :

my-nuxt-project/
├── assets/        # Contient des fichiers statiques
├── components/    # Contient les composants réutilisables
├── layouts/       # Contient les modèles de page
├── middleware/    # Contient le middleware
├── pages/         # Contient les routes et les composants associés
├── plugins/       # Contient les plugins pour étendre la fonctionnalité de Nuxt.js
├── static/        # Contient des fichiers statiques comme des images ou des icônes
├── store/         # Contient le magasin Vuex
└── nuxt.config.js # Configuration du projet Nuxt.js

3. Comprendre les environnements

Nuxt.js prend en charge plusieurs environnements, notamment development, staging et production. Chaque environnement a ses propres configurations.

// nuxt.config.js
export default {
  mode: 'universal', // ou 'spa'
  buildDir: 'dist',
  router: {},
  server: {},
  env: {
    NODE_ENV: process.env.NODE_ENV || 'development'
  }
}

Mise en pratique : projet fil rouge

Pour ce tutoriel, nous allons créer une application simple de gestion de tâches. Cette application permettra aux utilisateurs de créer, lire, mettre à jour et supprimer des tâches.

Étape 1 : Initialiser le projet Nuxt.js

Créez un nouveau dossier pour votre projet et initialisez-le avec Nuxt.js :

mkdir nuxt-todo-app
cd nuxt-todo-app
npx create-nuxt-app .

Suivez les instructions pour choisir une configuration appropriée.

Étape 2 : Créer le composant de tâche

Créez un nouveau composant Task.vue dans le dossier components/Todo/ :

<template>
  <div class="task">
    <span>task.text</span>
    <button @click="deleteTask">Delete</button>
  </div>
</template>

<script>
export default {
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  methods: {
    deleteTask() {
      this.$emit('delete', this.task.id);
    }
  }
}
</script>

<style scoped>
.task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>

Étape 3 : Créer la page de tâches

Créez un nouveau fichier index.vue dans le dossier pages/todo/ :

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addTask">
      <input v-model="newTask" placeholder="Add a new task" />
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <Task :task="task" @delete="removeTask(index)" />
      </li>
    </ul>
  </div>
</template>

<script>
import Task from '~/components/Todo/Task.vue';

export default {
  components: {
    Task
  },
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({ id: Date.now(), text: this.newTask });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
}
</script>

<style scoped>
form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}
</style>

Étape 4 : Ajouter la navigation

Ajoutez une nouvelle route dans le fichier nuxt.config.js pour permettre à l'utilisateur d'accéder à la page de tâches :

export default {
  // Autres configurations...
  router: {
    linkActiveClass: 'active',
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'todo',
        path: '/todo',
        component: resolve(__dirname, 'pages/todo/index.vue')
      });
    }
  }
}

Étape 5 : Lancer le projet

Lancez votre application Nuxt.js en local :

npm run dev

Ouvrez votre navigateur et accédez à http://localhost:3000/todo pour voir votre application.

Erreurs fréquentes et debugging

1. Erreur : "Cannot find module 'vue-router'"

Si vous rencontrez cette erreur, il peut être parce que le module vue-router n'est pas installé correctement.

## ❌ Mauvais
npm install vue-router --save

## ✅ Correct
npm install @nuxtjs/router --save

2. Erreur : "Failed to load resource: the server responded with a status of 404 (Not Found)"

Cette erreur peut survenir si le chemin de votre route est incorrect.

// ❌ Mauvais
export default {
  name: 'todo',
  path: '/toto'
}

// ✅ Correct
export default {
  name: 'todo',
  path: '/todo'
}

3. Erreur : "Unexpected token '<'"

Si vous voyez cette erreur, il peut être parce que votre fichier HTML est généré incorrectement.

// ❌ Mauvais
export default {
  head() {
    return {
      title: 'Nuxt.js App'
    };
  }
}

// ✅ Correct
export default {
  head() {
    return {
      title: 'Nuxt.js App',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ]
    };
  }
}

Pour aller plus loin

1. Ajouter des styles personnalisés

Vous pouvez ajouter des styles personnalisés à votre application en utilisant le fichier assets/main.css.

/* assets/main.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
}

2. Utiliser Vuex pour la gestion de l'état

Pour gérer l'état global de votre application, vous pouvez utiliser Vuex.

npm install vuex --save

Créez un nouveau fichier store/index.js :

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    }
  },
  actions: {
    addTask({ commit }, task) {
      commit('addTask', task);
    }
  }
});

3. Ajouter des tests unitaires

Pour ajouter des tests unitaires à votre application, vous pouvez utiliser Jest et Vue Test Utils.

npm install --save-dev jest @vue/test-utils babel-jest vue-jest

Créez un nouveau fichier tests/unit/index.spec.js :

// tests/unit/index.spec.js
import { shallowMount } from '@vue/test-utils';
import Task from '@/components/Todo/Task.vue';

describe('Task.vue', () => {
  it('renders props.text when passed', () => {
    const text = 'Learn Vue';
    const wrapper = shallowMount(Task, {
      propsData: { task: { id: 1, text } }
    });
    expect(wrapper.text()).toMatch(text);
  });
});

Défi pratique

Créez une application Nuxt.js qui permet aux utilisateurs de créer et de gérer des articles. L'application devrait avoir les fonctionnalités suivantes :

• Liste d'articles : Affiche tous les articles créés.
• Formulaire d'ajout : Permet à l'utilisateur d'ajouter un nouvel article.
• Édition d'article : Permet à l'utilisateur de modifier un article existant.
• Suppression d'article : Permet à l'utilisateur de supprimer un article.

N'hésitez pas à utiliser Vuex pour la gestion de l'état et Vue Router pour la navigation.