Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jeriah Colasino 3 posts 94 karma points
    Jun 17, 2022 @ 18:53
    Jeriah Colasino
    1

    Angular frontend in my website.

    How can i implement angular as frontend in my website? I read about umbraco backoffice written with angular js. How about the website? Thank you in advance.

  • Alex Skrypnyk 6134 posts 23953 karma points MVP 8x admin c-trib
    Jun 17, 2022 @ 21:22
    Alex Skrypnyk
    101

    Hi Jeriah,

    You have complete control over the front end of your website. You can edit 100% of symbols in response to the browser. You can do Angular, React, and VueJS. All frameworks work with Umbraco CMS.

    So answer your question - you can implement angular js as a frontend in your Umbraco website in the same way as in just an HTML project, just add angular to the template, and that's it.

    Thanks Alex

  • Adriano Fabri 469 posts 1633 karma points
    Sep 27, 2022 @ 10:33
    Adriano Fabri
    0

    I Jeriah,

    can you give me an example? I already have an Angular 13 app and I would to integrate in my Umbraco 10 website

    This is the files structure...where i must put all angular files/folder?

    enter image description here

    Thank you Adriano

  • Adriano Fabri 469 posts 1633 karma points
    Sep 27, 2022 @ 14:49
    Adriano Fabri
    0

    OK I found the answer :-)

    It works like a charm.

    Thank you Adriano

  • ziyad 3 posts 74 karma points
    Oct 04, 2022 @ 07:11
    ziyad
    1

    Please share it here so others can use as benchmark

  • Adriano Fabri 469 posts 1633 karma points
    Oct 11, 2022 @ 13:42
    Adriano Fabri
    1

    You're right ziyad.

    This is what I've done:

    In wwwroot folder I created a new folder  with name "angular" (I'll use it for all angular applications)
    In the "angular" folder I created the app folder ("test-app") and I copied  all builded files (except the index.html file).
    I created a template for the app in which I inserted all html code contained in the index.html file.
    I corrected all js and css files path
    I update all angular routing to match the umbraco routing
    I checked that all links contained in the angular app are correct
    Finally I created a new content and assigned it the newly created template
    

    et voilĂ ...angular app works perfectly.

    I hope this can help

    Adriano

  • Rami Kanawati 7 posts 76 karma points
    Apr 26, 2023 @ 11:08
    Rami Kanawati
    0

    What if I want to put it inside the umbraco cms and not as a published site outside the CMS, i want it inside along with multiple other projects. that i can shuffle through, please assist

  • Adriano Fabri 469 posts 1633 karma points
    Apr 27, 2023 @ 10:06
    Adriano Fabri
    1

    Hi Rami,

    I know what you want to do but this is the only way (for now) I found to integrate Angular App in Umbraco (no manage).

    This is the steps:

    • Create in wwwroot folder an angular folder that will contain all angular projects umbraco folder wwwroot folder
    • Create the app folder and copy here all angular app files angular folder app folder
    • In Umbraco, create a simple document type (I created it with no fields) and the template (this is the content of the index.html) for your angular app (in my case Angular - Protocollo DS) and update all URL to your app (in my case rows 16, 35, 37, 42, 43, 44 and 45) Settings - Template
    • In Umbraco, create a the content node for your angular app and check that the URL of each one are correct Content Nodes
    • Finally you must update the file path in the main.js file update angular file path

    That's all.

    Now when you update your angular app, you must only copy or update the new files in the wwwroot/angular/YOURAPP/ folder and update the file path in the main.js file.

    I hope this help you

    Adriano

  • alaa almasri 5 posts 25 karma points
    Sep 06, 2023 @ 12:19
    alaa almasri
    0

    hello Adriano Fabri

    is there a GitHub repo you can give me to understand how it build

  • Adriano Fabri 469 posts 1633 karma points
    Sep 06, 2023 @ 15:44
    Adriano Fabri
    0

    Hi alaa,

    I have not created a github repository for publishing Angular applications inside Umbraco.

    Moreover, compared to what I had indicated in the thread, over time I have also improved the publication and updating of Angular applications in Umbraco.

    What I could do, if it's okay for you, is to provide a series of example's files and related screenshots of the configuration in Umbraco of the document type/Template/Partial Views that can help you to understand how publish Angular Applications using Umbraco

    It will take me a while but it could definitely help you understand better all the stages

    Adrian

  • alaa almasri 5 posts 25 karma points
    Sep 07, 2023 @ 07:54
    alaa almasri
    0

    sure that would be great I have been struggling to find code or any articles about this if you can explain to me in steps how to build an Umbraco project with angular that would be great

  • alaa almasri 5 posts 25 karma points
    Sep 26, 2023 @ 08:44
    alaa almasri
    0

    any update

  • Nelson 2 posts 71 karma points
    Apr 01, 2024 @ 15:26
    Nelson
    0

    Hello Adriano I've followed this post and it works for my. At the and, you explain about, II need to update the paths in main.js

    For this demo, I've built my angular project only with any changes. Only template that angular create by default.

    I have doubt. Where is the paths in the main.js? For example, this is my file content in main.js

    enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

    Can you guide me please? Nelson

  • Meni 256 posts 492 karma points
    May 15, 2024 @ 22:49
    Meni
    0

    Working for me.

    Great Solution!!!!

    Thank you so much for sharing!!

  • Rami Kanawati 7 posts 76 karma points
    Apr 27, 2023 @ 10:10
    Rami Kanawati
    0

    are there any api calls that i can use, for example to get the umbraco user and only he/she can access my website? is that sth feasible

  • Adriano Fabri 469 posts 1633 karma points
    Apr 27, 2023 @ 10:23
    Adriano Fabri
    1

    You can done it in some ways:

    • directly in template before rendering the page
    • using a custom external method called before rendering the page
    • creating a custom RestAPI (C#) that manage the access (integrated with the Umbraco Members Authentication) that you can use in your angular app
    • or manage the access directly from angular (for example in the past I used the ADFS authentication cookie to check if user is logged and I put in the environment file the list of enabled user)

    Adriano

  • Rami Kanawati 7 posts 76 karma points
    Apr 28, 2023 @ 06:37
    Rami Kanawati
    0

    can you host more than one website in the cms or just one?

  • Adriano Fabri 469 posts 1633 karma points
    Apr 28, 2023 @ 14:22
    Adriano Fabri
    0

    Sure...in content section you can create one homepage node for every website and assign to each one a differnt host name using the "Culture and Hostnames" functionality

Please Sign in or register to post replies

Write your reply to:

Draft