Demo site build in Umbraco v.9.0.0-beta004 and .NET Core 5.0

Overview

Umbraco v9 Demo

Demo site build in Umbraco v.9.0.0-beta004 and .NET Core 5.0.

cover image

About this solution:

This is a demo site for Umbraco v9 build in the new .NET Core v5 version. It is built as an experiment/investigation and should not be used as a template for your next Umbraco site. Use it as a reference if you will and steal whatever you like and ignore the things you dont.

This is not the way of building Umbraco sites, it's a way. This site is built in a way that I like to build my Umbraco sites, which is a very "backend way". There are simpler ways of building Umbraco sites (using ModelsBuilder for example), so if you are new to Umbraco make sure you read the official docs for more info.

Content:

TODO:

  • Products from external data source virtually rendered using a ContentFinder. (In progress by Dennis Adolfi)

Unit Tests:

  • RenderController: Home
  • RenderController: Page
  • ViewComponents: ContentBlock
  • ViewComponents: Header
  • ViewComponents: Hero
  • ViewComponents: Navigation
  • ViewComponent: Footer
  • SurfaceController: ContactForm
  • UmbracoHelper: SiteSettings

Login:

This site uses an embeded SQLCE database to avoid having to restore and keep updating a restore script. To login to the Umbraco backoffice use these credentials:

Read more:

Go to adolfi.dev if you want to read more Umbraco and Unit Testing articles.

Comments
  • Models Builder for “simpler” sites? 🤔

    Models Builder for “simpler” sites? 🤔

    Hi Denis (and other contributors)!

    Great work on this one! Really awesome and thanks for sharing it! I would definitely contribute in the future! I really think that this project has the potential of being a great source of inspiration and best practice for Umbraco websites going forward. Like a documentation that actually shows how to solve the “real” problems implementors are facing.

    I’m wondering about ditching Models Builder. Is there a really good reason not to use it in a best practice example?

    I do get that you don’t want to expose the whole cms-model (IPublishedContent) in the view but wouldn’t the mapping in the controllers be cleaner/safer if done from a models builder model? The models created by Models Builder is basically what you are doing manually in the controllers but without all the constants for property names, or actually more “automatic constants” with the strongly typed names. They also keep information about any Compositions so one can go ie:

    if(model is IPageWithHero hero) {
    …
    }
    

    It’s also safer for any changes in the document type - MB would give a compiler warning. The current solution will throw at runtime in best case or silently fail/behave strange if I forget to change the constant for the property alias.

    Did you actively decide not to go with Models Builder? It would be nice to hear more about why and maybe document that decision.

    And also, I think it sounds bad to indicate that models builder is only suitable for “simpler projects” (in the readme) - that might put a lot of people in the wrong direction, I would say that it might be a matter of taste but from a technical standpoint running without Model Builder is a less safe and sustainable way of building a complex and maintainable solution with Umbraco - more manual work and more prone to errors.

    Would be nice to hear your thoughts?

    Cheers man!

    opened by enkelmedia 29
  • Testing v.9.0.0-beta004 demo - first-run upgrade error

    Testing v.9.0.0-beta004 demo - first-run upgrade error

    After cloning and running demo project, an upgrade required notice displays: https://www.screencast.com/t/QvjPBe7SuHj

    After clicking the continue button the following error displays: https://www.screencast.com/t/aLVKRsZiakQ

    Please advise. Thanks!

    opened by dmueller-sa 5
  • cleaner code?

    cleaner code?

    Hi Dennis, I have realised that you changed my last pull request and I like to understand your intention. So have changed the code again and added an extra comment for explanation.

    Let me explain in my own words: My concern is about the class name HeroComponent. Later on in Web project you reference this class in \Views\Home.cshtml with:

    @(await Component.InvokeAsync("Hero", Model.Hero))
    

    This is only works when you add the attribute [ViewComponent(Name = "Hero")] to the class.

    I can imagine one argument for the class name suffix Component and extra attribute:

    1. This is to express the type of class by its name.
    2. And the attribute to avoid an obviously redundant expression like [ViewComponent(Name = "HeroComponent")]

    If this is your intent, I think you should call the class HeroViewComponent and omit the attribute.

    Another argument for the extra attribute is to make views resilient against class name refactoring in the Core project.

    For me all this has code smells🤔 Maybe I am overly pedantic or got something wrong. Actually I just like to hear your opinion!

    Btw. I got my first ahh effect of mocking and testing😁

    /Dirk

    opened by idseefeld 4
  • Modelsbuilder

    Modelsbuilder

    Hi Dennis, I think this is a good starting point for a Models Builder setup.

    • Upgrade to Umbraco release version 9.0.0
    • small bugfixes for search
    • Models are generated in the .Core project
    • hard coded property alias constants are obsolete now!
    • manual mapping of these models int simple POCO view models are mostly done in page controllers (for SitePageBase base class I use an extension method viewModel.MapSitePageBase())
    • updated tests (need to setup all view model properties with empty values. I'm not sure this is the best approach🤔 Do you have an idea?)

    I am looking forward for your review. Have a nice weekend!

    Dirk

    opened by idseefeld 3
  • Replace `XPath` queries

    Replace `XPath` queries

    Depending on the content structure we can look for a settings node at root, under home node or deeper in structure. Alternatively we could also use Descendant() method, DescendantOfType() or FirstChildOfType().

    Fixes https://github.com/Adolfi/UmbracoNineDemoSite/issues/9

    opened by bjarnef 3
  • Replace ContentAtXPath

    Replace ContentAtXPath

    I noticed ContentAtXPath() is used here: https://github.com/Adolfi/UmbracoNineDemoSite/blob/master/UmbracoNineDemoSite.Core/Features/Shared/Settings/SiteSettings.cs#L17-L18

    In both Umbraco v8 and v9 there is no longer an XML config/cache, so it is NuCache representation as XML and using XPathNavigator. Most of the time we don't need it though.

    So with NuCache it should be faster using the LINQ queries or in other cases Examine.

    Something like this:

    private IPublishedContent home => this.umbracoHelper.ContentAtRoot().Where(x => x.ContentType.Alias == ContentTypeAlias.Home)?.FirstOrDefault();
    private IPublishedContent settings => this.umbracoHelper.ContentAtRoot().Where(x => x.ContentType.Alias == ContentTypeAlias.SiteSettings)?.FirstOrDefault();
    

    or

    private IPublishedContent home => this.umbracoHelper.ContentAtRoot().FirstOrDefault(x => x.ContentType.Alias == ContentTypeAlias.Home);
    private IPublishedContent settings => this.umbracoHelper.ContentAtRoot().FirstOrDefault(x => x.ContentType.Alias == ContentTypeAlias.SiteSettings);
    

    Furthermore I think it could use .Value() / Value<T>() extension method if the code should be a bit more simpler.

    public string CallToActionHeader => this.settings.Value<string>(PropertyAlias.CallToActionHeader);
    
    opened by bjarnef 3
  • Modelsbuilder with some broken Tests

    Modelsbuilder with some broken Tests

    Hi Dennis, I have changed some umbracoContext?.Content.GetByXPath requests into umbracoContext?.Content.GetByContentType which has a better performance. But I could not figure out how to update related tests😣

    Currently I have no time for further help because I am in a new job position where Umbraco is not a topic. I wish you good luck with this project.

    Maybe we meet at next CodeGarden...

    Dirk

    opened by idseefeld 2
  • upgrade to version 9.0.0 & search updates / fixes

    upgrade to version 9.0.0 & search updates / fixes

    1. Upgrade to release version 9.0.0
    2. Several fixes for search:
    • add url for content pages (not sure this is best practise getting the url 🙄)
    • fix total of pages + products
    • show single product result
    • add search field 'preamble' and type for Home page
    opened by idseefeld 2
  • exclude wwwroot\umbraco\lib folder. It gets regenerated on each run.

    exclude wwwroot\umbraco\lib folder. It gets regenerated on each run.

    Hi Dennis, I have exclude wwwroot\umbraco\lib folder, because it gets regenerated on each run. Hopefully Umbraco or Community (maybe me) will document an updated .gitignore for V9🙄

    Btw. again I create this PR for the feature/integration-products branch, because it seems to be your current WIP branch. In general I think it would be better to use the master branch. My experience with git is: short life times for feature branches are the best to avoid merging conflicts or limit the effort of solving these. What do you think about branch targets and git collaboration?

    Have a nice weekend!

    /Dirk

    opened by idseefeld 2
  • Modelsbuilder

    Modelsbuilder

    Hi Dennis, after CodeGarden and the "unintended" release of version 10.0.0 I have added a v10 solution to the Modelsbuilder branch. I think it makes sense to keep the v9 solution for now. Yours Dirk

    opened by idseefeld 1
  • Add custom field to Member index

    Add custom field to Member index

    Sorry if this is not the right place to ask, but I am seriously struggling to find out how to do this and wondered if there is any code here that would help:

    I have added some custom fields to the Member type and want to add them to the Member index. My last project was using Umbraco 7 and I have skipped V8 and gone straight to V9 for this current project, so configuring Examine indexes is completely different!

    So, say I have added a field to the Member type which has an alias of "disableBalanceAlert" ... how do I include this as a searchable field in the Member index?

    Again, if this is not an appropriate question here, then just comment as such and I'll continue my search elsewhere.

    opened by gordonsaxby 1
Owner
Dennis Adolfi
Blogs about Umbraco, Unit Testing and random .NET things at https://adolfi.dev
Dennis Adolfi
A demo of a Shopify site using Astro and React.

Shopify + Astro + React A demo of a Shopify site using Astro and React. If you'd like to learn how it's built and how you can do the same, check out t

Cassidy Williams 97 Dec 28, 2022
The user interface of the Restreamer for the connection to the Core application.

Restreamer-UI The user interface of the Restreamer for the connection to the Core application. React Material-UI (MUI) Development For the Restreamer

datarhei 12 Dec 21, 2022
An intro to Three.js and React :) Workshop materials and demo from HackTheNorth 2021

?? Speedy 3D - A Quick Intro to Three.js & React This workshop was originally created for Hack The North 2021! My personal motivation was to: learn th

Anson Yu 8 Dec 17, 2021
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Google Clone with ReactJS A small web app that imitate the desktop web version of google site, you can search whatever you want. Google Clone Demo Lin

Özge Coşkun Gürsucu 36 Aug 14, 2022
A Chrome T-Rex game remake using javascript and threejs. Online demo: https://rossning92.github.io/t-rex

T-Rex Game in 3D A Chrome T-rex game remake using javascript and threejs. Build the code Make sure you have node 12+ installed: https://nodejs.org/en/

null 79 Dec 29, 2022
Demo project to deploy front- and backend together on heroku.

spring-boot-react-bundle This is a demo project that shows how it is possible to deploy a react frontend and a Spring Boot backend into a heroku dyno.

André Schreck 5 Jul 22, 2022
Next / React / TS demo to quickly create a landing page

Next / React / TS demo to quickly create a landing page

null 1 Jun 27, 2022
A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell

Loggi Frontend Show & Tell - Animações com React Lottie A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell This project was bootstr

Gabriel Barreto 2 Aug 4, 2022
Demo of settingup tailwind 3 (cli) with emberjs

tailwind-setup-demo This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here

null 11 Aug 28, 2022
Expo Demo: Screen Capture with Managed Workflow

Expo Demo: Screen Capture with Managed Workflow This code demonstrates how to setup screen capture on an Expo app, without having to eject from the ma

Luis Taniça 12 Dec 30, 2022
TV Show App is an application that allows to searh tv shows based on user input. Each tv show is displayed in a Bulma Card component and when clicked, heads you to the official tv show site

TV SHOW APP TV Show App is an application that allows to search tv shows based on user input. Each tv show is displayed in a Bulma* Card component and

HENDEL SAMY 1 Dec 19, 2021
⚛️ 🚀 A progressive static site generator for React.

You are viewing the docs for v7 of React Static. You can browse all historical versions via Github branches! React Static A progressive static-site ge

React Static 10.2k Dec 27, 2022
A forkable Next.js site w/ a blank custom Nextra theme (w/Tailwind)

Nextra Blank Custom Theme/Boilerplate Example A nearly blank MDX blog/content site powered by a custom Nextra theme (see components/layout.js) w/Tailw

Jared Palmer 91 Jan 6, 2023
Hacker-news-with-react - 👾 Consuming the hacker news api, i created a more modern design for than the current site.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

João Thomaz 1 Jan 3, 2022
Site para treinar minhas habilidades com o react no frontEnd (totalmente voltado para o aprendizado)

Tutorial Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you ca

Júlia de Melo Albuquerque 3 Jan 31, 2022
🌀 Insert Awesome Shapes into Your React Site with Ease

React Awesome Shapes ?? Insert Awesome Shapes into Your React Site with Ease. Loved the project? Please consider donating to help it improve! Consider

Ashutosh Hathidara 608 Dec 30, 2022
Repo for APE consulting's uHUB social event site.

HYL_Hackathon 2022 u-Hub Inspiration Interested in finding social and academic events but have no idea where to find them? Tired of looking through co

Cameron Faith 3 Mar 29, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Alan Vieyra 4 Feb 1, 2022