Comment faire pour ajouter Bootstrap à une application Ruby on Rails

Si vous développez une application Ruby on Rails, vous voudrez peut-être ajouter des styles à votre projet pour faciliter l’engagement de l’utilisateur. Une solution consiste à ajouter Bootstrap, un cadre HTML, CSS et JavaScript conçu pour simplifier le processus de création de projets Web réactifs et mobiles. En implémentant Bootstrap dans un projet Rails, vous pouvez intégrer ses conventions de mise en page et ses composants à votre application pour rendre les interactions utilisateur avec votre site plus attrayantes.

Dans ce didacticiel, vous allez ajouter Bootstrap à un projet Rails existant qui utilise le bundle webpack pour servir ses ressources JavaScript et CSS. L’objectif sera de créer un site visuellement attrayant avec lequel les utilisateurs pourront interagir pour partager des informations sur les requins:

image: https: //assets.digitalocean.com/articles/docker_node_image/landing_page.png [Page de destination de l’application]

Pour suivre ce tutoriel, vous aurez besoin de:

Notre première étape consistera à cloner le référentiel rails-stimulus à partir du compte DigitalOcean Community. . Ce référentiel inclut le code de la configuration décrite dans Comment ajouter un stimulus à un Application Ruby on Rails, qui explique comment ajouter Stimulus.js à un projet Rails 5 existant.

Clonez le référentiel dans un répertoire appelé ++:

Accédez au répertoire ++:

Pour pouvoir utiliser le code de projet, vous devez d’abord installer les dépendances du projet, qui sont répertoriées dans son Gemfile. Utilisez la commande suivante pour installer les gems requis:

Ensuite, vous allez installer vos dépendances https://yarnpkg.com [Yarn]. Étant donné que ce projet Rails 5 a été modifié pour gérer les actifs avec webpack, ses dépendances JavaScript sont désormais gérées par Yarn. Cela signifie qu’il est nécessaire d’installer et de vérifier les dépendances répertoriées dans le fichier + package.json + du projet.

Exécutez la commande suivante pour installer ces dépendances:

L’indicateur + - check-files + vérifie que tous les fichiers déjà installés dans le répertoire + node_modules + n’ont pas été supprimés.

Ensuite, lancez vos migrations de base de données:

Une fois vos migrations terminées, vous pouvez tester l’application pour vous assurer qu’elle fonctionne comme prévu. Démarrez votre serveur avec la commande suivante si vous travaillez localement:

Si vous travaillez sur un serveur de développement, vous pouvez démarrer l’application avec:

Accédez à + ​​localhost: 3000 + ou + http: //: 3000 +. Vous verrez la page de destination suivante:

image: https: //assets.digitalocean.com/articles/build_rails_app/index_no_style.png [Page de destination de l’application]

Pour créer un nouveau requin, cliquez sur le lien * Nouveau Requin * en bas de la page, qui vous mènera à la route + sharks / new +. Vous serez invité à saisir un nom d’utilisateur (* sammy ) et un mot de passe ( shark *), grâce à la page https://www.digitalocean.com/community/tutorials/how-to-build-a-ruby-on du projet. rails-application # step-% E2% 80% 94-addition-authentification [paramètres d’authentification]. La vue + new + ressemble à ceci:

image: https: //assets.digitalocean.com/articles/build_rails_app/new_no_style.png [Créer un nouveau requin]

Pour vérifier que l’application fonctionne, nous pouvons lui ajouter des informations de démonstration. Entrez «Grand Blanc» dans le champ * Nom * et «Effrayant» dans le champ * Faits *:

image: https: //assets.digitalocean.com/articles/build_rails_app/add_shark_no_style.png [Ajouter un grand requin blanc]

Cliquez sur le bouton * Créer un requin * pour créer le requin:

image: https: //assets.digitalocean.com/articles/build_rails_app/show_no_style.png [Afficher le requin]

Vous avez maintenant installé les dépendances nécessaires pour votre projet et testé ses fonctionnalités. Ensuite, vous pouvez apporter quelques modifications à l’application Rails afin que les utilisateurs rencontrent une page de destination principale avant de se rendre à l’application d’informations sur les requins elle-même.

L’application en cours définit la vue racine sur la page principale d’informations sur les requins, la vue + index on pour le contrôleur` + sharks on`. Bien que cela fonctionne pour amener les utilisateurs à l’application principale, cela peut être moins souhaitable si nous décidons de développer l’application à l’avenir et d’ajouter d’autres fonctionnalités. Nous pouvons réorganiser l’application pour que la vue racine soit définie sur un contrôleur + home +, qui inclura une vue + index +. À partir de là, nous pouvons nous connecter à d’autres parties de l’application.

Pour créer le contrôleur + home +, vous pouvez utiliser la commande +rails generate + ` avec le générateur