Deployer Vue sur Railway

Pourquoi Déployer Vue sur Railway ?

Deploiement d'une application Vue.js sur Railway offre un moyen rapide et efficace de partager vos projets avec le monde entier. Cela permet aux utilisateurs finaux de tester, d'explorer et de modifier votre application sans avoir à installer les dépendances locales. Un cas concret est la création d'un blog personnel où vous partagez des articles et que vos lecteurs pourraient ajouter leurs propres commentaires.

Prérequis

• Connaissances nécessaires :

  • Base en JavaScript
  • Compréhension de Vue.js (composants, routes, état, etc.)
  • Familiarité avec la ligne de commande et les outils Git

• Outils à installer :

  • Node.js v14.0.0 ou ultérieur
  • npm v6.0.0 ou ultérieur
  • Git (optionnel mais recommandé pour le contrôle de version)

Concepts fondamentaux

1. Création d'un projet Vue

Pour commencer, vous devez créer un nouveau projet Vue.js.

## Créer un nouveau projet Vue avec Vue CLI
npm install -g @vue/cli
vue create mon-projet-vue
cd mon-projet-vue

2. Configuration de Railway

Vous avez besoin d'un compte Railway pour déployer votre application.

## Installer l'interface de ligne de commande Railway
curl -sSL https://railway.app/api/download/linux/latest | bash
./railway login

3. Déploiement sur Railway

Une fois que vous avez configuré Railway, il est temps de déployer votre application.

## Initialiser un dépôt Git (si ce n'est pas déjà fait)
git init
git add .
git commit -m "Initial commit"

## Créer une nouvelle instance sur Railway
railway up

## Suivez les instructions pour lier votre dépôt Git à l'instance sur Railway

Mise en pratique : Projet fil rouge

Mini-projet : Gestionnaire de Tâches

Étape 1 : Initialisation du projet

vue create todo-app
cd todo-app

Étape 2 : Création des composants

Créer un fichier TodoItem.vue :

<template>
  <li>
    item.text
    <button @click="remove">X</button>
  </li>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    remove() {
      this.$emit('remove', this.item.id);
    }
  }
}
</script>

Créer un fichier TodoList.vue :

<template>
  <ul>
    <todo-item 
      v-for="item in items" 
      :key="item.id"
      :item="item"
      @remove="onRemove"
    />
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: { TodoItem },
  data() {
    return {
      items: [
        { id: 1, text: 'Faire les courses' },
        { id: 2, text: 'Nettoyer la maison' }
      ]
    };
  },
  methods: {
    onRemove(id) {
      this.items = this.items.filter(item => item.id !== id);
    }
  }
}
</script>

Créer un fichier AddTodo.vue :

<template>
  <div>
    <input v-model="newItem" @keyup.enter="addTodo" />
    <button @click="addTodo">Ajouter</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    };
  },
  methods: {
    addTodo() {
      if (this.newItem.trim()) {
        this.$emit('add', { id: Date.now(), text: this.newItem });
        this.newItem = '';
      }
    }
  }
}
</script>

Étape 3 : Structure des fichiers

Structure du projet :

todo-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── TodoItem.vue
│   │   ├── TodoList.vue
│   │   └── AddTodo.vue
│   ├── App.vue
│   └── main.js
├── package.json
└── README.md

Étape 4 : Configuration de main.js et App.vue

src/main.js :

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/App.vue :

<template>
  <div id="app">
    <h1>Gestionnaire de Tâches</h1>
    <add-todo @add="addItem" />
    <todo-list :items="todos" @remove="removeItem" />
  </div>
</template>

<script>
import AddTodo from './components/AddTodo.vue';
import TodoList from './components/TodoList.vue';

export default {
  components: { AddTodo, TodoList },
  data() {
    return {
      todos: []
    };
  },
  methods: {
    addItem(todo) {
      this.todos.push(todo);
    },
    removeItem(id) {
      this.todos = this.todos.filter(item => item.id !== id);
    }
  }
}
</script>

Étape 5 : Déploiement sur Railway

Suivez les étapes de déploiement mentionnées dans la section "Prérequis".

Erreurs fréquentes et debugging

1. Erreur : Error: Cannot find module 'vue'

Code incorrect :

import Vue from 'vue';

Code correct :

// Assurez-vous que vous avez installé vue via npm
npm install vue

import Vue from 'vue';

2. Erreur : Error: Cannot find module 'axios'

Code incorrect :

import axios from 'axios';

Code correct :

// Assurez-vous que vous avez installé axios via npm
npm install axios

import axios from 'axios';

3. Erreur : Error: Cannot find module 'vue-router'

Code incorrect :

import VueRouter from 'vue-router';

Code correct :

// Assurez-vous que vous avez installé vue-router via npm
npm install vue-router

import VueRouter from 'vue-router';

Pour aller plus loin

1. Optimisation des performances

   • Utilisez les hooks onBeforeMount, onMounted, etc., pour gérer les effets de bord.
   • Optimisez les images et les assets.

2. Tests unitaires et d'intégration

   • Ajoutez des tests unitaires avec Jest ou Vue Test Utils.
   • Créez des tests d'intégration pour vérifier le fonctionnement global de l'application.

3. Authentification et sécurité

   • Utilisez des bibliothèques comme firebase ou auth0 pour gérer les connexions utilisateur.
   • Implémentez des règles de sécurité pour protéger vos données.

Défi pratique : Créer une application de gestion de notes

Créez une petite application de gestion de notes qui permet d'ajouter, modifier et supprimer des notes. Utilisez Vuex pour gérer l'état global des notes.

Instructions :

1. Créez un nouveau projet Vue.
2. Installez les dépendances nécessaires (vue-router, vuex).
3. Implémentez la structure de composants pour afficher et modifier les notes.
4. Utilisez Vuex pour stocker et gérer les notes de manière persistante.
5. Déployez l'application sur Railway.