vueport
v0.1.5
Composants de fichiers uniques et SSR pour les rails avec Vue JS et WebPack
Si je devais construire ce joyau, j'utiliserais probablement quelque chose comme Mini_racer pour rendre les composants Vue sur le même serveur, au lieu d'introduire une demande HTTP et des frais généraux infra. Si quelqu'un utilise toujours ce joyau et veut faire ce travail, il devrait être relativement simple en modifiant la classe de rendu.
Vueport fournit à votre application Rails une approche moderne et composante du développement de l'interface utilisateur en utilisant WebPack et Vue.js pour activer un fichier unique, des composants réactifs rendus sur le serveur et le client et une intégration transparente avec les vues de vos rails.
Jetez un œil à la documentation Vue.js sur les composants de fichiers uniques pour plus d'informations de ce côté.
Vueport Piggybacks sur le gemme WebPackRails pour obtenir la configuration de WebPack avec des rails, alors vérifiez cela pour plus d'informations.
Ici.
Ajoutez cette ligne à Gemfile de votre application:
gem 'vueport'Puis exécuter:
$ bundle
Ou installez-le vous-même comme:
$ gem install vueport
Puis courez juste
rails generate vueport:installPour bootstrap tout ce dont vous avez besoin pour démarrer (cela installera les webpackrails et aussi tout ce que Vueport a besoin en haut).
Pour exécuter votre application, exécutez
bundle exec foreman start -f Procfile.devPour démarrer le serveur de développement WebPack et votre application Rails!
Assurez-vous d'exécuter npm run compile (ou yarn run compile ) dans le cadre de votre processus de déploiement vers la production. Cela compile la version de production de votre bundle côté client, ainsi que la compilation du bundle côté serveur pour notre application Node JS à utiliser.
En production, nous envoyons des demandes HTTP à un serveur NodeJS de base pour rendre notre contenu. Pour exécuter l'application Rails et le serveur de nœuds simultanément, utilisez Procfile .
Enveloppez votre application dans l'assistant vueport , pour rendre vos composants. Par exemple dans votre application.html.erb :
< body >
<%= vueport do %>
<%= render partial : 'shared/nav' %>
<%= yield %>
<% end %>
</ body >Il peut également accepter un seul argument. Par exemple:
< body >
<%= vueport yield %>
</ body >Ajoutez les assistants WebPack Rails à votre mise en page pour inclure votre JavaScript et CSS (voir le WebPackRails Readme pour plus d'informations).
Assurez-vous de placer le point d'entrée JS après l'assistance Vueport!
Par exemple:
< head >
<%= stylesheet_link_tag * webpack_asset_paths ( 'application' , extension : 'css' ) %>
</ head >
< body >
<%= vueport do %>
<%= render partial : 'shared/nav' %>
<%= yield %>
<% end %>
<%= javascript_include_tag * webpack_asset_paths ( "application" , extension : 'js' ) %>
</ body >Hors de la boîte, Vueport s'attend à ce que vos composants vivent dans des applications / composants et compile des actifs vers public / webpack . Pour les modifier, vous devrez modifier à la fois la configuration WebPack (dans config / webpack.config.js et config / webpack.server.js ) et la configuration de l'application Vue GEM. Pour ce faire, dans un initialiseur, faites:
Vueport . configure do | config |
config [ :server_port ] = 3001
endConsultez le gemme WebPackRails pour plus d'informations sur sa configuration.
Ce que Vueport vous donne est effectivement 3 applications:
Ceux-ci ont été configurés afin qu'ils puissent être construits pour la production complètement séparément pour éviter les pipelines complexes - par exemple, vous pouvez exécuter ces 3 applications en utilisant Docker complètement séparément, ce qui signifie que vous n'avez pas besoin de rubis et de nœud dans un seul DockerFile.
Pour plus d'informations sur la façon dont WebPack a été intégré à Rails, consultez cette section du WebPack Rails Readme.
Pour activer le rendu côté serveur, j'ai créé une application NodeJS simple qui utilise le rendu Vue Server pour rendre le contenu de la page sur chaque demande. Pour activer la réhydratation côté client, nous attachons également le contenu de la vue d'origine dans un modèle pour l'instance côté client Vue.
La SSR est uniquement activée en production.
Mon expérience de travail avec de nombreuses bibliothèques d'interface utilisateur modernes et, en particulier, à les intégrer avec des applications Rails (en particulier React et Vue JS), m'a conduit à la conclusion que Vue JS semble être une bibliothèque plus expliquée et «les batteries« incluaient »la bibliothèque lors de la construction de compnes pour les rails.
J'utilise React sur une base régulière pour les spas et j'adore sa philosophie fonctionnelle, mais pour que l'écriture des composants s'intègre dans un frontend Rails, Vue semble me fournir la moins complexité et semble être plus facile pour les développeurs de rubis.
Pour une comparaison collaborative Vue.js et réagir, vérifiez cela.
J'obtiens l'erreur Could not load compiled manifest from /app/public/webpack/manifest.json en production
Vous devrez exécuter npm run compile dans le cadre de votre processus de construction pour générer le bundle JS de production (cette erreur est générée par WebPackRails)
Après avoir vérifié le dépôt, exécutez bin/setup pour installer des dépendances. Ensuite, exécutez rake spec pour exécuter les tests. Vous pouvez également exécuter bin/console pour une invite interactive qui vous permettra d'expérimenter.
Pour installer ce gemme sur votre machine locale, exécutez bundle exec rake install . Pour publier une nouvelle version, mettez à jour le numéro de version dans version.rb , puis exécutez bundle exec rake release , qui créera une balise GIT pour la version, pousse Git Commits and Tags, et poussez le fichier .gem sur RubyGems.org.
Les rapports de bogues et les demandes de traction sont les bienvenus sur GitHub à https://github.com/samtgarson/vueport. Ce projet est destiné à être un espace sûr et accueillant pour la collaboration, et les contributeurs devraient adhérer au Code de conduite de l'alliance des contributeurs.
Le GEM est disponible en open source en vertu des termes de la licence du MIT.
