vueport

Vueport

Einzeldateikomponenten und SSR für Schienen mit Vue JS und WebPack

Euen Dieses Juwel ist nicht aktiv gepflegt! Es scheint immer noch keine gute Lösung für das Ausführen von SSR für VUE zu geben (wie React_on_Rails für React).

Wenn ich dieses Juwel wieder aufbauen würde, würde ich wahrscheinlich so etwas wie mini_racer verwenden, um die VUE -Komponenten auf demselben Server zu rendern, anstatt eine HTTP -Anforderung und eine Infra -Overhead einzuführen. Wenn jemand dieses Juwel immer noch verwendet und diese Arbeit erledigen möchte, sollte es relativ einfach sein, indem die Renderer -Klasse geändert wird.

Vueport bietet Ihrer Rails -App einen modernen, komponentierten Ansatz zur UI -Entwicklung, indem Sie WebPack und Vue.js verwenden, um einzelne Dateien, reaktive Komponenten auf dem Server und den Client und die nahtlose Integration in Ihre Schienenansichten zu aktivieren.

Schauen Sie sich die Dokumentation von Vue.js in einzelnen Dateikomponenten an, um weitere Informationen zu dieser Seite der Dinge zu erhalten.

Vueport Piggybacks auf das WebpackRails -Gem, um das Webpack -Setup mit Rails zu erhalten. Weitere Informationen finden Sie unter.

Beispiel Rails App

Hier.

Installation

Fügen Sie diese Zeile der GemFile Ihrer Anwendung hinzu:

 gem 'vueport'

Und dann ausführen:

 $ bundle

Oder installieren Sie es selbst als:

 $ gem install vueport

Dann renn einfach

rails generate vueport:install

Um alles zu starten, was Sie zum Einstieg benötigen (dies wird WebPackRails und alles, was Vueport oben benötigt, installiert).

Um Ihre App auszuführen, führen Sie aus

bundle exec foreman start -f Procfile.dev

So starten Sie den WebPack Dev Server und Ihre Rails -App!

Produktionseinsatz

Stellen Sie sicher, dass Sie npm run compile (oder yarn run compile ) als Teil Ihres Bereitstellungsverfahrens für die Produktion ausführen. Dadurch wird die Produktionsversion Ihres Client -Seitenpakets zusammengestellt und das Server -Seitenpaket für unsere Verwendung von Node JS -App zusammengestellt.

In der Produktion senden wir HTTP -Anforderungen an einen grundlegenden NodeJS -Server, um unseren Inhalt zu rendern. Verwenden Sie Procfile , um die Rails -App und den Knotenserver gleichzeitig auszuführen.

Verwendung

Helfer anzeigen

Wickeln Sie Ihre Bewerbung in den Helfer vueport , um Ihre Komponenten zu rendern. ZB in Ihrer application.html.erb :

 < body >
    <%= vueport do %>
        <%= render partial : 'shared/nav' %>
        <%= yield %>
    <% end %>
</ body >

Es kann auch ein einziges Argument akzeptieren. Z.B:

 < body >
    <%= vueport yield %>
</ body >

Asset Setup

Fügen Sie die Webpack -Rails -Helfer in Ihr Layout hinzu, um Ihr JavaScript und CSS (siehe WebPackRails ReadMe für weitere Informationen).

Stellen Sie sicher, dass Sie den JS -Einstieg nach dem Vueport -Helfer platzieren!

Z.B:

 < 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 >

Standardkonfiguration

Außerhalb der Box erwartet Vueport, dass Ihre Komponenten in App/Komponenten leben und Vermögenswerte für öffentliche/webpack kompiliert. Um diese zu ändern, müssen Sie sowohl die WebPack -Konfiguration (in config/webpack.config.js als auch config/webpack.server.js ) und die Vue -Gem -Anwendungskonfiguration ändern. In einem Initialisierer tun Sie dazu:

 Vueport . configure do | config |
    config [ :server_port ] = 3001
end

Weitere Informationen zu seiner Konfiguration finden Sie im WebPackRails -Gem.

Wie funktioniert es?

Was Vueport Ihnen gibt, sind effektiv 3 Anwendungen:

• Ihre Basis Rails App
• Eine Knoten -App für das Server -Side -Rendering in der Produktion (in /Renderer)
• Eine Knoten -App zum Ausführen von Webpack in der Entwicklung

Diese wurden so eingerichtet, dass sie für die Produktion vollständig separat erstellt werden können, um komplizierte Pipelines zu vermeiden. Zum Beispiel können Sie diese 3 -Anwendung mit Docker vollständig separat ausführen, was bedeutet, dass Sie in einer einzigen Dockerfile keinen Ruby und Knoten benötigen.

Weitere Informationen darüber, wie WebPack in Rails integriert wurde, finden Sie in diesem Abschnitt der Webpack Rails Readme.

Server -Side -Rendering (SSR)

Um die Server -Side -Rendering zu aktivieren, habe ich eine einfache NodeJS -App erstellt, mit der der Vue Server -Renderer auf jeder Anforderung den Inhalt der Seite ausgelöst hat. Um die Rehydration der Client -Seite zu aktivieren, fügen wir auch den ursprünglichen Ansichtsinhalt in einer Vorlage für die Client -Seite -Vue -Instanz hinzu, um abzuholen.

SSR ist nur in der Produktion aktiviert.

Warum Vue.js?

Meine Erfahrung, mit vielen modernen UI -Bibliotheken zu arbeiten und sie mit Rails -Apps (insbesondere React und Vue JS) zu integrieren, hat mich zu dem Schluss geführt, dass Vue JS ein explizderer und „Batterien inklusive“ Bibliothek zu sein scheint, wenn sie Kompnents für Schienen erstellen.

Ich benutze regelmäßig Reaction für Spas und liebe seine funktionale Philosophie, aber für das Schreiben von Komponenten, die in ein Frontend der Schienen einbeziehen, scheint Vue mir die geringste Komplexität zu bieten und scheint für Ruby -Entwickler am einfachsten zu sein, über die Vernunft zu sein.

Überprüfen Sie dies für einen VUE.JS- und React Collaborative -Vergleich.

FAQs

• Ich erhalte den Fehler Could not load compiled manifest from /app/public/webpack/manifest.json in der Produktion

  Sie müssen npm run compile als Teil Ihres Erstellungsprozesses ausführen, um das Produktions -JS -Bundle zu generieren (dieser Fehler wird von WebPackRails generiert).

Zu tun

• SSR behandeln
• Machen Sie die Webpack -Konfiguration eher wie die Konfiguration aus der VUE CLI -Vorlage
• Optimieren Sie die SSR -Interaktion mit NodeJs
• JS -Komponenten -Test -Setup

Entwicklung

Führen Sie bin/setup nach dem Auschecken des Repo aus, um Abhängigkeiten zu installieren. Führen Sie dann rake spec aus, um die Tests auszuführen. Sie können auch bin/console für eine interaktive Eingabeaufforderung ausführen, mit der Sie experimentieren können.

Um dieses Juwel auf Ihrem lokalen Computer zu installieren, führen Sie bundle exec rake install aus. Um eine neue Version zu veröffentlichen, aktualisieren Sie die Versionsnummer in version.rb und führen Sie bundle exec rake release aus, die ein Git -Tag für die Version erstellt, Git Commits und Tags drücken und die .gem -Datei auf rubygemems.org weitergeben.

Beitragen

Fehlerberichte und Pull -Anfragen sind auf Github unter https://github.com/samtgarson/vueport willkommen. Dieses Projekt soll ein sicherer, einladender Raum für die Zusammenarbeit sein, und die Mitwirkenden sollen sich an den Verhaltenskodex für den Mitwirkenden halten.

Danke

• Vielen Dank an Evan Sie und das VueJS -Team für die Aufrechterhaltung einer so lebendigen und unterstützenden Gemeinschaft in Bezug auf Vue JS
• Vielen Dank auch an Mipearson für sein WebpackRails -Edelstein, auf das dieses Juwel angewiesen ist.

Lizenz

Das Edelstein ist unter den Bedingungen der MIT -Lizenz als Open Source erhältlich.