[Closed] AstroJS + Umbraco CMS: documentation cont...
# help-with-other
j
The [docs](https://docs.astro.build/en/guides/cms/) for AstroJS have a dedicated section called "Use a CMS with Astro" which is currently missing Umbraco. I've started putting together a repo of documentation around such an integration to eventually submit for inclusion and would humbly request anyone who knows anything about the topic to consider contributing! I know folks such as @rickbutterfield, @Louie and @Prenders have dabbled somewhat, so was hoping for a collaborative effort with putting some instructions together. Some guides are just stubs, but some ("Storyblok", "Contentful" and "ButterCMS") are so robust that the Astro docs puts them first in the ordering (they're specifically listed in this array!). The repo I've put together for the documentation is here, readily awaiting your PRs: https://github.com/jacksorjacksor/astrojs-with-umbraco-cms-docs https://cdn.discordapp.com/attachments/1217409689588072519/1217409690305167450/astro-icon-light-gradient.png?ex=6603ec20&is=65f17720&hm=35f6517d81ac9ca764e9d2d2928e183d06823afc1dc790b74eb51132bef0c6ae&
p
This is awesome @jacksorjacksor (Richard Jackson). Would be great to have Umbraco feature on the Astro site.
r
I know @Louie is having the time of his life in Australia.. so it might be a while before he picks this up
r
Agreed, would love to contribute to this!
Is the idea to collect stuff first, come up with a draft and then fork the Astro docs to add our guide?
j
@rickbutterfield Yep - so my thinking is: - Use the repo I've put together as a starting point for gathering info/workarounds/issues/tips/links to other blogs/videos/resources - Clean that up to match an Astro-docs style formatting - Fork/PR/chat w Astro team
r
Spot on!
p
Sound's great. This will actually be a really useful exercise for my Astro talk too. Would be great if we can get it into the Astro docs for a reveal at Code Garden 🙂
Also adding @Kenneth Solberg to this thread who has also been doing some amazing work with Astro and Umbraco
j
Will also reach out to Mikkel Keller (of Umbraco Spark fame - https://umbracospark.com/media/0i1dni4h/spark-2024-sustainability-at-scale_novicell_mks.pdf )
r
Looking at a few of the others, I think there's a few routes we could potentially take. Either live
fetch
the data (like the WordPress example) or do something like generating an OpenAPI client like I detailed in my blog (Ghost example does something similar)
p
I feel that the OpenApi (codegen) approach that you went through in you blog would be a good one. That said, I wonder if there is more of a 'Quick Start' that is less involved for people just tinkering.
r
Agreed, just running
fetch()
queries against the API will give you JSON you can render out much quicker
But strongly typed TS and using the DeliveryApiExtensions packages is a much nicer dev experience
p
Exactly. Sounds like a good move.
j
Also it was nice to see Louis put together a basic Typescript Umbraco client in his Skrift article (god bless Skrift): https://24days.in/umbraco-cms/2023/sustainable-performant/astronomically-performant/
@rickbutterfield Will add your "Generating a TypeScript OpenAPI client from Umbraco's Content Delivery API" blog to the "Community Resources" bit in the repo.
s
@UMB.FYI tip
u
Thanks for the tip
Maybe Kenn wants to contribute too (can't find his handle!)
Kenn's approach is `fetch`:
Copy code
javascript
const response = await fetch(`${import.meta.env.UMBRACO_SERVER_URL}/umbraco/delivery/api/v2/content/item/home`);
const data = await response.json();
j
^FYI @Joe Glombek
p
Hey all... I was just going to make a start on fleshing out a structure. Just checking that no one else is working on it at the moment so we're not treading over the same ground.
Just added a PR expanding the structure in line with the other guides. That should help us to divide and conquer the sections 🙌
j
Brilliant, thank you so much @Prenders !
g
hey all, I'm happy to help contribute, I'm just about to start looking at integrating umbraco cd api with astro... built a couple of sites with astro now (one with squidex), and looking forward to integrating umbraco following your articles etc...
I was just looking at automating typescript models from the cd api too.
j
@garpunkal nice! Yeah @rickbutterfield 's article's a great primer on the TypeScript model creation, plus uses "openapi-generator-cli" which is used by the Umbraco team for v14 (so is useful for us to be more aware of in general!) https://rickbutterfield.dev/blog/typescript-openapi-umbraco-content-delivery/
g
amazing! that's what I needed... I've created my site in astro/typescript and tailwind... now looking to integrate umbraco api. I'll happily provide any learnings I have
are we looking at just creating docs or an actual integration for astro?
j
Starting with the docs, then we'll see! Currently the Astro site doesn't include Umbraco as a CMS in its "[Use a CMS with Astro](https://docs.astro.build/en/guides/cms/)" page, so we're starting there.
And yes, if you have any learnings which aren't basic but are still valuable (i.e. Tailwind usage) please add to the repo - even if not used for this specific doc it could still have use elsewhere for the community
m
If you have specific questions, happy to try and answer them. We’ve written a few sites that build static html through Astro—but those lessons are “write an API” and now with 13 fully released and content API available, less and less need for custom API endpoints. Advanced topics may include integrations with specific platforms like Netlify and how you use staging and production pushes. But everything is very well documented-another thing that makes Astro great 🙂
j
@Mark Drake Nice one, thanks so much!
Yeah the Astro docs have been great so far - they have an entire site dedicated to "how to contribute to Astro's documentation": https://contribute.docs.astro.build/
r
@marcusjmsweden this may be of interest to you
m
Ah thanks Rick
While I am trying to do the same but with Blazor I think same considerations will have to be taken 🙂
j
@marcusjmsweden Ah would LOVE to see this with Blazor tbh
m
I tried to make jondjones do a video 😉
j
(hilariously my two requests were Blazor and static site generation, and look what this thread is trying to achieve...)
m
In my current project i am using blazor as components but I am debating whether it would make sense to make the entire frontend blazor and use the content delivery api
I mean if everything is in the same project It would make things even smoother right?
Hehe. Well at least we tried.
I mean the eshop example shows the power of this.
I did find this actually but I would prefer using the blazor frontend in the same project
I mean is there any argument why you couldn't use blazor only even in a regular umbraco app?
@Laura Neto might have tried both and could answer that 😄
I mean that, instead of using Client, could you use Blazor within the CMS Site and not get any issues?
j
Well I've been chatting wtih Kenn Jacobson about this and he put together this blog on the train ride home!! https://kjac.dev/posts/quick-n-dirty-blog-with-astro-and-umbraco/
p
This is awesome! Thanks for sharing
r
Encouraging to see we're pretty much all on the same page for a basic/no frills set up
p
It totally is. I have to say, when I first put in the talk submission for this, I had no idea how many of us were looking into it. I was like "this will be novel and unique". Since then I've accumulated so much great stuff from the community - which is just amazing and I can't thank you all enough 🙂 Gotta love the Umbraco community and its openness to share and support each other.
p
k
@marcusjmsweden Have you seen this? https://github.com/YodasMyDad/UmbracoBlazor I thought it was pretty cool the first time I saw it. If you can live with the new SSR mode in Blazor 8 then you can skip all the workarounds.
m
Yes that was like the "original" :). Seems this has been taken off a bit now
I think everything changed with .net8. Now it is really viable to do this.
I think lauras example was pretty good. Using the api is the game changer here
Although I think it should be possible to do it within the umbraco app
For me, being able to use C# everywhere is a big deal
s
This seems to go off topic from Astro now, Blazor is it's own interesting topic but that's not the point here 😅
m
Ok maybe you could divide it into two topics?
s
This is great! I hear he's planning more posts and I need to play with this now. I think I've struggled most with getting a dynamic navigation set up from the Umbraco content, but I just got a hint from him earlier..
m
bransching off from ricks reply
s
Discord can't do that.
m
How do we create a similar topic under help-with-other?
s
He said > The Delivery API can do that. Fetch all with no properties included. > You'll be slightly overfetching stuff like create and update dates, IDs and so, but nothing terrible > Mind you though, for static rendering you need all the content anyway 😄 Makes good sense to me!
m
Blazor+UmbracoCMS
s
Start a new topic 😂 😅 🙈
m
Yes but I would like the replies with it
s
okay but that's not possible 🤷
m
@rickbutterfield I created a new subtopic. Maybe we can get that link over to that one?
s
I'd love a discussion focused on Blazor though! Start a topic, @ mention everyone who was interested earlier, take screeenshots of existing replies maybe?
m
I did now
but i couldn't get any of these replies over there
Ok people who replied then, you can continue there 🙂
That should do it
j
Following this subject with great interest. 🙂 The examples I've seen so far have only dealt with generating Astro pages from Umbraco content, any media being linked to the original Umbraco site. A suggestion would be to add optional media handling (as in copying and relinking) to the documentation. EDIT: noted that Kenn wrote about it in his blog, would be good to have more info about it in the finished documentation though.
j
Hi @janosbananos - absolutely, the next step for me is looking into media linking (images ofc but areas such as audio too). If you're able to test anything please consider adding your input to the docs!
p
My 10 cents on Media would be to have it remain in the Umbraco domain in terms of management, then ideally have it served via a CDN to the Astro app. For example Azure Blob storage with a CDN. The media can then be read from the Content Delivery API and prefixed with the appropriate URL. In terms of this initial Astro Documentation - at least for the first pass anyway, we should keep it as simple as possible in line with the other CMS's featured on the Astro Docs. We can then hopefully then get our shoe in the door and expand where required. For now, I think blogs are the best place to explore tinkering, experimentation and edge cases. All that said, I'm totally blown away by the interest in this ❤️
I'm hoping to find some time over the weekend to chip away at the docs. Please shout up if you are doing the same so we can coordinate who writes what section. I'll most likely look at the "Building a blog with Umbraco and Astro" section next (in line with the other guides)
j
@Prenders Go for it! A problem I had last night is using the auto-generated Typescript classes in place of Kenn's mapped classes (what post is mapped to at the bottom of the attached) - specifically I had issues with casting date and getting the image URL. Will write up more details later on. https://cdn.discordapp.com/attachments/1217409689588072519/1221036737732542505/image.png?ex=66111e14&is=65fea914&hm=f57d42c7cc62504baa7dab310947ddf7c4c4babfd0c9b5cd0b7c46341a1b49ec&
I also found that running the
npm run build
step to create the static assets will ignore any value set for NODE_TLS_REJECT_UNAUTHORIZED, so Astro won't allow the self-signed cert from the Umbraco HTTPS endpoint. https://github.com/jacksorjacksor/astrojs-with-umbraco-cms-docs/issues/5
p
Just replied on the GitHub issue for us to wrap our head around this one. I like the idea of branching off this thread and into a GitHub issue to keep conversation focused. Shall we do that for any areas that are likely to grow legs.
j
Yeah I think creating issues on the GitHub repo is the best way currently, honestly.
r
That’s effectively what I’m doing on my site. Using Astro’s own Image component referencing the Umbraco media URL, which helps with caching on build.
j
For anyone checking this thread out please take a look at @Prenders 's latest contribution, putting in the building blocks for "Building a blog with Umbraco and Astro": https://github.com/jacksorjacksor/astrojs-with-umbraco-cms-docs
p
Spotted a few typos on my self review 🙈. I'll get those sorted in a second pass.
j
Completely standard!
s
A bit of quick feedback while I'm following [the guide](https://github.com/jacksorjacksor/astrojs-with-umbraco-cms-docs?tab=readme-ov-file) (I can make a PR later, just jotting things down): 1. To get started I need an Astro project --> I chose to go with a Blank one, but I guess I should have gone for the Blog template when asked? 2. when listing the folder structure you used:
Copy code
src/
│   index.astro
│   [...slug].astro
but it should be
Copy code
src/pages/
│   index.astro
│   [...slug].astro
3. When the Layout gets added it's listed as
import Layout from '../../layouts/Layout.astro';
but layouts live in the
src/pages/layous
directory, the reference should be
import Layout from '../layouts/Layout.astro';
4. The contents of
Layout.astro
is unknown? Could be because I chose the wrong thing in step 1. I made it this to have some valid html:
Copy code
html
---
---
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <main>
        <slot />
    </main>
</body>
</html>
5. You refer to the RTE content with
<div set:html={article.properties.content?.markup}></div>
but that requires the delivery api to be properly configured, I'd change the first example in the prerequisites from
Copy code
json
      "DeliveryApi": {
        "Enabled": true
      }
to:
Copy code
json
      "DeliveryApi": {
        "Enabled": true,
        "PublicAccess": true,
        "RichTextOutputAsJson": true
      },
Note also
PublicAccess
is set to true so we don't have to juggle API keys.
Also: correct me if I'm wrong on anything here! I am not an expert (yet!)
g
do you want to suggest [...path] too? as this allows any depth of url
you can completely render out the site using that, and a flexible page and layout
s
Also, @garpunkal I can't remember where you asked but I would love to see a tutorial on Typescript types as well!
Yes, I was missing the nav from this document too!
g
yep, I mentioned it in here, but deleted it, as work came up. I've built a complete headless client using that approach above... I've got this [...path].astro file:
Copy code
javascript
---
import Generic from "@layouts/Generic.astro";
import { GetAllRoutes, GetContentItemByPath } from "@scripts/clients/UmbracoClient";

export async function getStaticPaths() {    
    const pages = await GetAllRoutes();
    if (pages?.items === undefined) return [{ params: { id: "" } }];
    return pages?.items?.map((page) => ({
        params: { path: page?.route?.path },
        props: page?.properties,
    }));
}

export const prerender = import.meta.env.DISABLE_SSR as Boolean;

const page = await GetContentItemByPath(Astro.url.pathname);

---
<Generic page={page} />
this allows you to either prerender (staticpaths) or ssr. based on ENV variable. You can use different layouts per umbraco template. I've then got a file to render the block list, which then determines what blocklist to render.
really quickly on the typescript client: 1. Install Content Delivery API Extensions for Typed Swagger
2. install NPM package: @hey-api/openapi-ts
3. script for running it:
Copy code
json
"scripts": {        
        "generate": "openapi-ts"
    },
4. add this config file, openapi-ts.config.cjs
Copy code
javascript
/** @type {import('@hey-api/openapi-ts').UserConfig} */
module.exports = {
    input: 'http://localhost:27546/umbraco/swagger/delivery/swagger.json',
    output: 'src/scripts/api',
    enums: true,   
    useOptions: true,
    postfixServices: "Service",
    name: "UmbracoApiClient"
}
then do yarn openapi-ts
astro has been brilliant to use and having the typescript client just makes development rapid. I will trying an get my demo in github to share, working on that
s
Thanks @garpunkal I'll have to check it later, moving on to Bellissima for now 😅
g
happy to help with questions on this though if anyone has any
p
This is all awesome... and good spot on those issues in the docs @Sebastiaan. I'll update shortly. The initial plan was to keep the first pass in line with the other guides on the Astro docs (hopefully to give use a good chance of getting it up with the least resistance). https://docs.astro.build/en/guides/cms/ We can then expand and add more advanced setups as required (Swagger, CodeGen, Navigation, etc.) What do you all think?
g
sounds good to me, good to get a presence up on Astro. I'm more than happy to help where I can too. Definitely been some interesting learnings over the last couple of weeks with Astro.
p
Nice one @garpunkal. Yeah, I've been on a bit of a journey with it myself and migrating a few projects from Gatsby. 🙌
g
ah nice 🙂 how have you found it?
we're using vercel currently to host, but I think we'll be looking at umbraco cloud and then vercel to host the FE.
p
Yeah, great! I'm using Netlify for handful and some on Azure Static Web Apps. So far, so good 🙂
g
are you just using astro? or a different tech like react?
p
Astro for the most part, with some React (dynamic "islands").
g
ah cool
r
That's pretty much what my blog post covers, using the same tech that the new backoffice is using to talk to the management APIs https://rickbutterfield.dev/blog/typescript-openapi-umbraco-content-delivery/
g
ah nice 🙂 didn't see that
p
@jacksorjacksor (Richard Jackson) Created a PR for the points @Sebastiaan raised https://github.com/jacksorjacksor/astrojs-with-umbraco-cms-docs/pull/7 Point 2: updated incorrect folder structure Point 3: updated incorrect Layout reference path Point 4: added basic Layout.astro markup Point 5: added
PublicAccess: true
to Content Delivery API setup For discussion: Point 1: the other CMS guides do not reference which project template to use. Do we need to? Point 5: I'm currently setting
RichTextOutputAsJson
as
false
which gives the raw markup. Setting to
true
provides structured JSON which maybe useful in some scenarios, but I don't think it would work with the raw
set:html
directive.
j
@Prenders have PRed - will look into the two points this evening. Thanks for raising!
s
Wow! I was going to raise a PR myself, but this is even better 😮 Thanks all! Will look into strongly typed models when I get a chance. In my head I am comparing this to strongly types models for Razor, so making the TS models is like Umbraco's Modelsbuilder making the C# models, right?
r
Pretty much! Once you combine the Delivery Api Extensions package with some sort of client generator you get strong types
Copy code
ts
// The `type` here has been automatically added by VS Code Intellisense
import { OpenAPI, ContentResource, type BlogPostContentModel } from '@/api';

<section>
{
  blogPosts.items.map((blogPost: BlogPostContentModel) => (
    <article>
      <h2><a href={blogPost.route.path}>{blogPost.name}</a></h2>
      ...content
    </article>
  ))
}
</section>
g
yep it's very straightforward
j
I had a few issues using the Delivery Api Extensions models, but that was entirely based on my own inexperience with Typescript. Will write up more formal issues as they might be useful for visibility
(For me the absolute dream is strongly typed everything on both sides, so I want to do a bit more investigation and highlighting pitfalls)
FYI @Laura Neto I hope you're aware of the general usage/appreciation the Delivery Api Extensions package is getting in this project!
g
It's amazing.
j
Also shout-outs to @Sebastiaan for giving this feedback 👏 ON 👏 HIS 👏 BIRTHDAY 🎂
p
FYI Team Astro... I'm heading to the Welsh Hills for a long needed break next week. DM me if you would like any second opinion on any docs stuff. 🏔️🌳😌
l
Awesome to hear!! I was super excited about the Delivery API coming out, but when I saw there were no typed models (when I was building my Blazor demo), I was a bit sad... Then my partner @Vitor Rodrigues , which was more familiar with OpenApi specs, did a quick POC for my demo and we made it a package. So, on the bright side, it was a great opportunity for us to build our first package! (to be honest we were hoping for this to someday be included in the core 😉)
s
@rickbutterfield I have some absolute newbie questions and comments for your article! -
import.meta.env.PUBLIC_BASE_URL
- where do I set this base url? I have an
env.d.ts
but it doesn't seem to be the right place - at the
Usage
section of your post I had no idea where to put these things, would good to note that this is happening in the frontmatter of the
.astro
file - Why
getContent20
? I can see there is a
getContent
but it is obsolete. It feels yuck to me to have versioning in method names (functions I know) -
@/api
didn't work for me, I had to give it a path
../api
(I've attached a screenshot of what my setup looks like) https://cdn.discordapp.com/attachments/1217409689588072519/1223215793530208276/image.png?ex=66190b7b&is=6606967b&hm=32d6365a79a446c8a0b641a2e25e9747789eccab8aeb74507905765cc1f286cf&
g
Public base URL can be set in a .env file. Getcontent20 is generated from the swagger. @api is an alias setup in typescript config
I'm out at moment but can go in more details later.
r
Thank you for the nudge @Sebastiaan! @jacksorjacksor (Richard Jackson) had some similar questions so I've just updated my blog post to answer them, mainly these bits... Pro tips Two very quick tips to make your development experience even better when working with these examples! Firstly, in my
.env
file at the root of the project I'm set up to connect to either my local Umbraco environment or my live one for testing content from production. These variables can then be picked up inside Astro using `import.meta.env.VARIABLE_NAME`:
Copy code
sh
PUBLIC_BASE_URL=http://localhost:20625
PUBLIC_BASE_URL_HTTPS=https://localhost:44389

# PUBLIC_BASE_URL=https://my.live.env
# PUBLIC_BASE_URL_HTTPS=https://my.live.env
Secondly, use TypeScript path aliases! Rather than having lots of
../
in import statements like
import { file } from '../../../../../api'}
you can alias these folders inside your
tsconfig.json
.
Copy code
diff
{
  "compilerOptions": {
    ...
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
    ...
  }
}
Then inside one of my Astro pages (
/src/pages/index.astro
for example) I can reference both my API and the environment variables we've previously set. And then this bit about the `getContent20()`: > The
getContent20()
is used as the name generated from the Content Delivery API as it's versioned as v2.0, so you will find you have an obsolete
getContent()
function in your generated API too. Kevin Jump has a [great example in his TimeDashboard demo](https://github.com/KevinJump/TimeDashboard/blob/master/TimeDashboard.Client/Configuration/ConfigureSwaggerGenOptions.cs#L21-L23) of how you can remove the versioning from each function name.
s
Thanks, very helpful! I'll look at the generated name later. And for the tsconfig, this is the only way I could make it work:
Copy code
{
  "extends": "astro/tsconfigs/strictest",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": [
        "*"
      ]
    }
  }
}
It did warn me I needed a base URL, but it still wouldn't work if I set it to
./
or
.
, had to explicitly make it
./src
for the @ shortcut to start working 🤷
Nope, all good, I think I just had to restart the server! Now it looks like this, I do need the
baseUrl
though:
Copy code
json
{
  "extends": "astro/tsconfigs/strictest",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    }    
  }
}
j
@rickbutterfield - that @Kevin Jump link to remove the version number is so good
One issue I ran into was using the HTTPS endpoint with Umbraco due to the self-signed cert issue - yes this is warned against, but I still wanted to try! Most behaviour was fine except the final
npm run build
step to generate the pages - running that command doesn't take the
NODE_TLS_REJECT_UNAUTHORIZED=0
setting into account, so no joy. If anyone's interested in this then check out the issue OR is the recommended line just "no HTTPS when using local dev, please use HTTP"? Interested in perspectives (feel free to discuss on the issue itself) https://github.com/jacksorjacksor/astrojs-with-umbraco-cms-docs/issues/5
Hello! I'm getting closer to calling "v1" of the documentation - i.e. the first version that I would PR to the Astro docs to get the ball rolling. Would greatly appreciate eyes and feedback on it. It's essentially the most basic version of getting Umbraco + Astro running, with links to community resources that show other methods of doing this. https://github.com/jacksorjacksor/astrojs-with-umbraco-cms-docs/blob/main/README.md
p
Awesome... this is great, and agreed on keeping v1 super simple to have least resistance getting it onto the Astro site. We can then look at extending going forward (Webhooks, TypeScript, etc.)
j
Fab - I'm going to look into putting in a PR for this today and we'll see what happens
p
Sweet! Keep us updated.
j
OK I had to add a reference to the Umbraco logo into an array of logos and now we're good with the automated checks. Now - for the humans. https://cdn.discordapp.com/attachments/1217409689588072519/1228349538574663830/image.png?ex=662bb8a7&is=661943a7&hm=30d3264fc8cf094b3fd0127c26e4f87590d2c6a53fe03c8fef7f6e49fef4368a&
s
This looks brilliant @jacksorjacksor (Richard Jackson) and thanks all for the contributions! Hope this gets a review in the next few weeks, I'm excited! 🙌
p
Sweet... good progress at least.
m
Nice writeup
g
finally got my headless sandbox public: https://github.com/garpunkal/Umbraco-Headless-Sandbox, would love any feedback on the approach... 🙂
I will write something on it at some stage, but i've used the generated typescript client, tried to extend the CD API a little (or prepped for it). I have to say, I've found it all very easy to accomplish
j
Nice work @garpunkal ! Do let us know how you found the process/what you'd then look to achieve as a result etc.
g
yeah, I'll write something up when I have chance, just wanted to get it out there really.. I'm sure things aren't 100% so if you have any suggestions on improvements, would love to hear them... I'm not sure if this is hte best place for astro discussion? or if there is another channell
j
Here is definitely good for Umbraco + Astro related things!
d
After a few issues I have UmBootstrap building to a dist directory. However, locally it runs as /dist/index.html which then breaks the generated paths as links for child pages e.g. /features/feature-rich-text-editor/ Is this something I should even try and fix locally as it's really intended for a remote server?
p
You should be able to use
astro dev
or
astro build
followed by
astro preview
to run it on a local server
You can also get super funky and try something like Vercel's dev/serverless (I believe Netlify have something similar too) https://vercel.com/blog/vercel-dev Not tried these myself yet though.
d
Ahh good point, I'm use Live Server extension, I'll try the cli
j
Thanks @Prenders - @Dean Leigh do keep us updated please!
d
It seems
npm run preview
works perfectly thank you
p
Sweet. Would love to play around with the Vercel tool at some point too. Although I suppose that only makes sense if you use that for hosting
d
Because I am using the Free Azure Static Web Apps with GitHub Actions for CI/CD for all my other experiments I will stick to that for now. I was originally trying to get HTMX working in Astro but only got so far so thought I had better learn some Astro basics first 🙂
p
Nice. Would love to know a bit more about HTMX... keep us posted if you have any joy
s
Every few weeks I see HTMX mentioned and I look at it again and then I try to figure out what I would need it for and then I give up since I can't see a need. It's probabably super useful, but I haven't found the link yet that explains why to a non-frontender.
d
If you have a SSG you can have live data in plain HTML pages. That alone is amazing. For example the list of Features in this page comes from Umbraco CD API. If I add a new Feature page it will be dynamically updated without the need to build and publish the page. https://nice-smoke-0659ba11e.5.azurestaticapps.net/
s
Yes, so here I am wondering what the difference is between that and Astro islands?
d
Seeing as I've only been using HTMX for 3 weeks and Astro for 2 I may not be the best person to ask 🤣 But… I think if you want dynamic React for example then you would use Astro Islands but you can use HTMX in Astro Page Partials. In fact that is what I have been trying to get working this week but then started getting into routing and SSR. Lots of fun learning this stuff though.
s
@jacksorjacksor (Richard Jackson) / @garpunkal crazy thought... what if you merged the two of your concepts together? A "living" documentation of how to implement Umbraco & Astro that outputs a site, built on Umbraco & Astro explaining concepts etc.
d
I'm halfway there @Sean Thorne I have: An UmBootstrap site running on Azure as the Content Delivery API: https://content-delivery-api-01.azurewebsites.net/ A static site rendering content from it: https://nice-smoke-0659ba11e.5.azurestaticapps.net/ And now have an Astro site running locally rendering the same content using Astro (I have the HTMX JSON coming in as well but need to work out how to render it in Astro): https://cdn.discordapp.com/attachments/1217409689588072519/1233428347237961769/image.png?ex=662d0f29&is=662bbda9&hm=1770f3f35bfed0588240c593a64bc9de4e2359dd91b1af2a6de27217fd910a7a&
m
Does any of these samples play with the authentication aspects?
that is one part where it would be nice to see more examples
p
Auth is definitely possible with Astro. There is some great documentation on the site. https://docs.astro.build/en/guides/authentication/ I have a potential project coming up that would require Firebase auth. Will report back if it comes to fruition. https://docs.astro.build/en/guides/backend/google-firebase/#adding-authentication-with-firebase
m
it would be nice to see how it works with the default umbraco membership
s
https://ahastack.dev/ explains how HTMX can be a part of a simpler, more efficient, web stack. I typically go with UHA though 🙂
m
@skttl There was some talk about that in a reacent blazor standup on dotnet too
htmx seems like a great option when working with Umbraco Headless (and any tech)
I admit html can be a bit scary in webservices but it should be secure 🙂
j
Delighted to announce that the AstroJS + Umbraco CMS guide has been officially accepted and merged into the Astro documentation! Huge thanks to everyone involved in this project, notably @Prenders & @rickbutterfield. Job done! Guess I need to sort out my own blog now....! https://docs.astro.build/en/guides/cms/umbraco/ https://cdn.discordapp.com/attachments/1217409689588072519/1236613938440048691/image.png?ex=6638a5fa&is=6637547a&hm=3630cdfefca445457133f18b653d5100ebbb60ea5d66ae611e9d6cdddd531659&
d
That's amazing @jacksorjacksor (Richard Jackson) ! I joined a JavaScript meetup the other day and got to demo using Umbraco Content Delivery API with HTMX and Astro. Great feedback from my JavaScript tutor on ease of UX in UmBootstrap. Big shoutout to @rickbutterfield for Block Preview. I hope we can recreate this in Belissima.
p
Ah sweet! Really fantastic news! Thanks so much for setting up this initiative @jacksorjacksor (Richard Jackson) 🙌
r
Oh amazing! Has happened quicker than I thought. Great work team, and thanks @jacksorjacksor (Richard Jackson) for organising it all
s
Love it! Great work everyone! 🎉
j
Hi everyone! @cultiv.dev has now marked the initial Umbraco Spark Hackathon "issue" for the docs as Closed, and thus this project is completely finalised! Huge thank you to everyone who's contributed, most notably @Prenders and @rickbutterfield - it was strangely emotional to see this project being completed, and it couldn't have been without you. For anyone using Astro, a platform which continues to grow and develop by the day (they've just announced a Content Layer) do please let us know how it goes! Happy Friday and thank you x https://github.com/umbraco-community/spark-hackathon-2024/issues/10 https://cdn.discordapp.com/attachments/1217409689588072519/1251063419243593738/Screenshot_20240614_083314_GitHub.jpg?ex=666d371a&is=666be59a&hm=e4befbfdbdecb36b419081f2c43f0fb4eaa398e1a6c34a00a2e658838c100338&
m
@jacksorjacksor (Richard Jackson) a little late to the party but just wanted to say thanks for your great work on this. Astro and Umbraco really works great together.
@jacksorjacksor (Richard Jackson) Btw since this is closed, is there an updated thread where this discussion should take place?
s
I'd create a new thread with details of what you're doing and where it fails.
m
Not so much failure but learning :). Well, learning by failing perhaps haha. I really like this Project and I hope it continues to grow. Good topic for meetups.
the ts generation was a bit trickier than I thought but got the hang of it I think. C# is still > JS 😉
j
@marcusjmsweden Ah thank you so much!
120 Views