Exactly three years ago I had this discussion with other fellow Umbraco developers and no clear decision came of it.
What is the preferred way to include applications, say VueJS apps, in an Umbraco website? We wish to use Umbraco to manage static content, news and information, etc. We then have several apps that we need to migrate off WebSphere. Several use VueJS for the UI and connect to an API. We'd like to continue using the APIs and build fresh new UI that integrates with or mimics the Umbraco site.
We write a simple app in Vue. When done, run NPM Run Build which spits out a single App.js file. Today we drop that into a WebSphere portlet. Tomorrow we want to upload that to the Umbraco server, putting it in an appropriate location so the web server can serve it up. We then need to add a reference to a page, a page that uses a template that includes the necessary Vue references.
We have done this in a way with using the UmbracoSurfaceControllers and the API.
We server content up to a mobile app (currently in PhoneGap/Cordova), a Kiosk app, written in C# and XAML on a Windows machine, and sending data to Twilio (a texting service), AND we host our site using the Umbraco front end.
That said, if you want Umbraco to be your content server, you mainly have to use the Umbraco API to output your data and we use JSON to consume the data in each of our applications.
We set up multiple sub domains, but only have one instance Umbraco, in essence running multiple sites, our each of our applications use their corresponding "site" to consume their data. You could also do a similar thing Umbraco does by outputting the page tree into XML. This way each tree node is a page, much like Umbraco sees it. In your case, each Vue component or view would be equivalent to the Umbraco node tree that contains all the properties needed for your Vue app. The Vue app would just need to match or consume the properties that Umbraco outputs.
Your Vue application would actually be the main domain, and your Umbraco application would be on a subdomain (could be same server just different folder location), and in IIS you would just point each to their own domain. You wouldn't really put your Vue JS app in the same folder as your Umbraco app.
Your tie between would be a call from the Vue JS app to the content file (could be your XML or JSON file that get generated from Umbraco), and that is how the Vue app would get its data.
In each node, if you want, you could:
Include any necessary Vue references in the admin content panel, like a Template reference or anything like that configured in a DataType, and select the Template or use the DataType with predefined corresponding View Templates.
You could use a similar option as above, but what we do in some cases, is we consume JSON data from a database in a custom admin Plugin that allows our content editors select configurations from a dropdown based on what our database says they could select. THEN we pass what the user selected and on Save and Publish, we catch the event and pass the data back to our custom database and do any processing and matching to output our desired data output.
Just consume the data by outputting what gets entered in the Umbraco tree as a JSON or XML page (similar to an RSS, not really a file) and your app just consumes the data.
Not sure if this helps you any. We did a ton of work and found Umbraco to be HIGHLY configurable and very easy to get data out of and write data for custom applications that will never use Umbraco as the front end.
If you need an example of what I am talking about, I could try to draw something up. Not sure how your Vue app set up is, or if my explanation is helpful. Just let me know.
I kinda see it, but not quite. Seems more complex than I had envisioned. I figured we could just upload a .js file to the scripts folder via the back office. Maybe via a special data type. Then place that on a page perhaps just like adding a textbox to a document type.
That is very useful. I am looking to spec a system with similarities and your answer was very useful to read.
One question that I couldn't quite figure out yet and it might be due to my lack of understanding of how vue handles routes:
How do you make sure you're allowing authors to create new pages without the need to deploy new vue routes or route rules?
I entirely understand how you map predicted vue routes to predicted umbraco nodes but how would you allow authors the flexibility to create content or change information architecture in umbraco without making changes to your vue apps, particularly around route mapping?
Preferred way to include apps in your Umbraco site
Exactly three years ago I had this discussion with other fellow Umbraco developers and no clear decision came of it.
What is the preferred way to include applications, say VueJS apps, in an Umbraco website? We wish to use Umbraco to manage static content, news and information, etc. We then have several apps that we need to migrate off WebSphere. Several use VueJS for the UI and connect to an API. We'd like to continue using the APIs and build fresh new UI that integrates with or mimics the Umbraco site.
What is everyone doing?
To continue my own conversation...
We write a simple app in Vue. When done, run NPM Run Build which spits out a single App.js file. Today we drop that into a WebSphere portlet. Tomorrow we want to upload that to the Umbraco server, putting it in an appropriate location so the web server can serve it up. We then need to add a reference to a page, a page that uses a template that includes the necessary Vue references.
@Connie,
We have done this in a way with using the UmbracoSurfaceControllers and the API.
We server content up to a mobile app (currently in PhoneGap/Cordova), a Kiosk app, written in C# and XAML on a Windows machine, and sending data to Twilio (a texting service), AND we host our site using the Umbraco front end.
That said, if you want Umbraco to be your content server, you mainly have to use the Umbraco API to output your data and we use JSON to consume the data in each of our applications.
We set up multiple sub domains, but only have one instance Umbraco, in essence running multiple sites, our each of our applications use their corresponding "site" to consume their data. You could also do a similar thing Umbraco does by outputting the page tree into XML. This way each tree node is a page, much like Umbraco sees it. In your case, each Vue component or view would be equivalent to the Umbraco node tree that contains all the properties needed for your Vue app. The Vue app would just need to match or consume the properties that Umbraco outputs.
Your Vue application would actually be the main domain, and your Umbraco application would be on a subdomain (could be same server just different folder location), and in IIS you would just point each to their own domain. You wouldn't really put your Vue JS app in the same folder as your Umbraco app.
Your tie between would be a call from the Vue JS app to the content file (could be your XML or JSON file that get generated from Umbraco), and that is how the Vue app would get its data.
In each node, if you want, you could:
Include any necessary Vue references in the admin content panel, like a Template reference or anything like that configured in a DataType, and select the Template or use the DataType with predefined corresponding View Templates.
You could use a similar option as above, but what we do in some cases, is we consume JSON data from a database in a custom admin Plugin that allows our content editors select configurations from a dropdown based on what our database says they could select. THEN we pass what the user selected and on Save and Publish, we catch the event and pass the data back to our custom database and do any processing and matching to output our desired data output.
Just consume the data by outputting what gets entered in the Umbraco tree as a JSON or XML page (similar to an RSS, not really a file) and your app just consumes the data.
Not sure if this helps you any. We did a ton of work and found Umbraco to be HIGHLY configurable and very easy to get data out of and write data for custom applications that will never use Umbraco as the front end.
If you need an example of what I am talking about, I could try to draw something up. Not sure how your Vue app set up is, or if my explanation is helpful. Just let me know.
@ Carlos,
I kinda see it, but not quite. Seems more complex than I had envisioned. I figured we could just upload a .js file to the scripts folder via the back office. Maybe via a special data type. Then place that on a page perhaps just like adding a textbox to a document type.
That is very useful. I am looking to spec a system with similarities and your answer was very useful to read.
One question that I couldn't quite figure out yet and it might be due to my lack of understanding of how vue handles routes: How do you make sure you're allowing authors to create new pages without the need to deploy new vue routes or route rules?
I entirely understand how you map predicted vue routes to predicted umbraco nodes but how would you allow authors the flexibility to create content or change information architecture in umbraco without making changes to your vue apps, particularly around route mapping?
Appreciate your answer.
is working on a reply...