jacksorjacksor (Richard Jackson)
03/13/2024, 9:51 AMjacksorjacksor (Richard Jackson)
03/13/2024, 9:53 AMPrenders
03/13/2024, 9:54 AMRavi
03/13/2024, 9:58 AMrickbutterfield
03/13/2024, 10:06 AMrickbutterfield
03/13/2024, 10:09 AMjacksorjacksor (Richard Jackson)
03/13/2024, 10:11 AMrickbutterfield
03/13/2024, 10:12 AMPrenders
03/13/2024, 10:20 AMPrenders
03/13/2024, 10:21 AMjacksorjacksor (Richard Jackson)
03/13/2024, 10:28 AMrickbutterfield
03/13/2024, 10:38 AMfetch
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)Prenders
03/13/2024, 10:46 AMrickbutterfield
03/13/2024, 10:54 AMfetch()
queries against the API will give you JSON you can render out much quickerrickbutterfield
03/13/2024, 10:55 AMPrenders
03/13/2024, 10:58 AMjacksorjacksor (Richard Jackson)
03/13/2024, 11:09 AMjacksorjacksor (Richard Jackson)
03/13/2024, 11:10 AMSebastiaan
03/13/2024, 11:14 AMUMB.FYI
03/13/2024, 11:14 AMrickbutterfield
03/13/2024, 11:21 AMrickbutterfield
03/13/2024, 11:22 AMrickbutterfield
03/13/2024, 11:23 AMjavascript
const response = await fetch(`${import.meta.env.UMBRACO_SERVER_URL}/umbraco/delivery/api/v2/content/item/home`);
const data = await response.json();
jacksorjacksor (Richard Jackson)
03/13/2024, 2:38 PMPrenders
03/14/2024, 10:02 AMPrenders
03/14/2024, 10:35 AMjacksorjacksor (Richard Jackson)
03/14/2024, 12:12 PMgarpunkal
03/15/2024, 10:39 AMgarpunkal
03/15/2024, 10:40 AMjacksorjacksor (Richard Jackson)
03/15/2024, 10:47 AMgarpunkal
03/15/2024, 10:48 AMgarpunkal
03/15/2024, 10:48 AMjacksorjacksor (Richard Jackson)
03/15/2024, 11:03 AMjacksorjacksor (Richard Jackson)
03/15/2024, 11:04 AMMark Drake
03/17/2024, 2:35 AMjacksorjacksor (Richard Jackson)
03/18/2024, 10:52 AMjacksorjacksor (Richard Jackson)
03/18/2024, 10:54 AMrickbutterfield
03/21/2024, 9:16 AMmarcusjmsweden
03/21/2024, 9:17 AMmarcusjmsweden
03/21/2024, 9:18 AMjacksorjacksor (Richard Jackson)
03/21/2024, 2:45 PMmarcusjmsweden
03/21/2024, 3:04 PMjacksorjacksor (Richard Jackson)
03/21/2024, 3:21 PMjacksorjacksor (Richard Jackson)
03/21/2024, 3:22 PMmarcusjmsweden
03/21/2024, 5:24 PMmarcusjmsweden
03/21/2024, 5:24 PMmarcusjmsweden
03/21/2024, 5:25 PMmarcusjmsweden
03/21/2024, 5:25 PMmarcusjmsweden
03/21/2024, 5:28 PMmarcusjmsweden
03/21/2024, 5:28 PMmarcusjmsweden
03/21/2024, 5:29 PMmarcusjmsweden
03/21/2024, 5:29 PMmarcusjmsweden
03/21/2024, 5:31 PMjacksorjacksor (Richard Jackson)
03/22/2024, 8:13 AMrickbutterfield
03/22/2024, 9:14 AMPrenders
03/22/2024, 9:23 AMjacksorjacksor (Richard Jackson)
03/22/2024, 9:45 AM../../
and thought of your path aliasing
https://cdn.discordapp.com/attachments/1217409689588072519/1220669718311206944/image.png?ex=660fc843&is=65fd5343&hm=e042b374a8a08c525d3b39cae17747e2b6d396304f070071cfcaf4280b6d15eb&
https://cdn.discordapp.com/attachments/1217409689588072519/1220669718554218526/image.png?ex=660fc843&is=65fd5343&hm=4f54ccb4d8754d1db5a1ab7d30e01563525bd5ea8646ccce9f6c83453bd0cfd9&Prenders
03/22/2024, 10:03 AMkrebil
03/22/2024, 12:30 PMmarcusjmsweden
03/22/2024, 1:30 PMmarcusjmsweden
03/22/2024, 1:31 PMmarcusjmsweden
03/22/2024, 1:47 PMmarcusjmsweden
03/22/2024, 1:48 PMmarcusjmsweden
03/22/2024, 1:48 PMSebastiaan
03/22/2024, 1:50 PMmarcusjmsweden
03/22/2024, 1:50 PMSebastiaan
03/22/2024, 1:51 PMmarcusjmsweden
03/22/2024, 1:51 PMSebastiaan
03/22/2024, 1:51 PMmarcusjmsweden
03/22/2024, 1:52 PMSebastiaan
03/22/2024, 1:52 PMmarcusjmsweden
03/22/2024, 1:52 PMSebastiaan
03/22/2024, 1:52 PMmarcusjmsweden
03/22/2024, 1:52 PMSebastiaan
03/22/2024, 1:53 PMmarcusjmsweden
03/22/2024, 1:54 PMSebastiaan
03/22/2024, 1:54 PMmarcusjmsweden
03/22/2024, 1:54 PMmarcusjmsweden
03/22/2024, 1:55 PMmarcusjmsweden
03/22/2024, 1:55 PMmarcusjmsweden
03/22/2024, 1:55 PMmarcusjmsweden
03/22/2024, 1:58 PMjanosbananos
03/22/2024, 4:19 PMjacksorjacksor (Richard Jackson)
03/22/2024, 4:41 PMPrenders
03/22/2024, 5:02 PMPrenders
03/23/2024, 9:50 AMjacksorjacksor (Richard Jackson)
03/23/2024, 10:04 AMjacksorjacksor (Richard Jackson)
03/23/2024, 10:08 AMnpm 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/5Prenders
03/23/2024, 10:41 AMjacksorjacksor (Richard Jackson)
03/23/2024, 11:01 AMrickbutterfield
03/23/2024, 11:07 AMjacksorjacksor (Richard Jackson)
03/25/2024, 11:17 AMPrenders
03/25/2024, 11:19 AMjacksorjacksor (Richard Jackson)
03/25/2024, 11:27 AMSebastiaan
03/27/2024, 11:47 AMsrc/
│ index.astro
│ [...slug].astro
but it should be
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:
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
json
"DeliveryApi": {
"Enabled": true
}
to:
json
"DeliveryApi": {
"Enabled": true,
"PublicAccess": true,
"RichTextOutputAsJson": true
},
Note also PublicAccess
is set to true so we don't have to juggle API keys.Sebastiaan
03/27/2024, 11:49 AMgarpunkal
03/27/2024, 11:50 AMgarpunkal
03/27/2024, 11:51 AMSebastiaan
03/27/2024, 11:51 AMSebastiaan
03/27/2024, 11:52 AMgarpunkal
03/27/2024, 11:53 AMjavascript
---
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.garpunkal
03/27/2024, 11:57 AMgarpunkal
03/27/2024, 11:57 AMgarpunkal
03/27/2024, 11:57 AMjson
"scripts": {
"generate": "openapi-ts"
},
garpunkal
03/27/2024, 11:58 AMjavascript
/** @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"
}
garpunkal
03/27/2024, 11:58 AMgarpunkal
03/27/2024, 11:58 AMgarpunkal
03/27/2024, 12:03 PMSebastiaan
03/27/2024, 12:04 PMgarpunkal
03/27/2024, 12:04 PMPrenders
03/27/2024, 12:15 PMgarpunkal
03/27/2024, 12:16 PMPrenders
03/27/2024, 12:22 PMgarpunkal
03/27/2024, 12:22 PMgarpunkal
03/27/2024, 12:23 PMPrenders
03/27/2024, 12:25 PMgarpunkal
03/27/2024, 12:25 PMPrenders
03/27/2024, 12:26 PMgarpunkal
03/27/2024, 12:26 PMrickbutterfield
03/27/2024, 12:42 PMgarpunkal
03/27/2024, 12:42 PMPrenders
03/27/2024, 1:14 PMPublicAccess: 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.jacksorjacksor (Richard Jackson)
03/27/2024, 1:19 PMSebastiaan
03/27/2024, 1:42 PMrickbutterfield
03/27/2024, 1:53 PMts
// 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>
garpunkal
03/27/2024, 1:53 PMjacksorjacksor (Richard Jackson)
03/27/2024, 2:14 PMjacksorjacksor (Richard Jackson)
03/27/2024, 2:15 PMjacksorjacksor (Richard Jackson)
03/27/2024, 2:27 PMgarpunkal
03/27/2024, 2:32 PMjacksorjacksor (Richard Jackson)
03/27/2024, 9:15 PMPrenders
03/28/2024, 2:02 PMLaura Neto
03/28/2024, 4:00 PMSebastiaan
03/29/2024, 10:22 AMimport.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&garpunkal
03/29/2024, 10:41 AMgarpunkal
03/29/2024, 10:41 AMrickbutterfield
03/29/2024, 10:50 AM.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`:
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
.
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.Sebastiaan
03/29/2024, 11:29 AM{
"extends": "astro/tsconfigs/strictest",
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": [
"*"
]
}
}
}
Sebastiaan
03/29/2024, 11:34 AM./
or .
, had to explicitly make it ./src
for the @ shortcut to start working 🤷Sebastiaan
03/29/2024, 11:45 AMbaseUrl
though:
json
{
"extends": "astro/tsconfigs/strictest",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [ "src/*" ]
}
}
}
jacksorjacksor (Richard Jackson)
03/30/2024, 11:20 AMjacksorjacksor (Richard Jackson)
03/30/2024, 11:23 AMnpm 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/5jacksorjacksor (Richard Jackson)
04/11/2024, 7:03 PMPrenders
04/12/2024, 7:36 AMjacksorjacksor (Richard Jackson)
04/12/2024, 10:50 AMPrenders
04/12/2024, 10:54 AMjacksorjacksor (Richard Jackson)
04/12/2024, 1:41 PMjacksorjacksor (Richard Jackson)
04/12/2024, 2:08 PMjacksorjacksor (Richard Jackson)
04/12/2024, 2:22 PMjacksorjacksor (Richard Jackson)
04/18/2024, 7:07 AMPrenders
04/18/2024, 8:16 AMmarcusjmsweden
04/20/2024, 2:11 PMgarpunkal
04/22/2024, 9:24 AMgarpunkal
04/22/2024, 9:54 AMjacksorjacksor (Richard Jackson)
04/22/2024, 10:10 AMgarpunkal
04/22/2024, 10:12 AMjacksorjacksor (Richard Jackson)
04/22/2024, 8:57 PMDean Leigh
04/25/2024, 9:28 AMPrenders
04/25/2024, 10:02 AMastro dev
or astro build
followed by astro preview
to run it on a local serverPrenders
04/25/2024, 10:06 AMDean Leigh
04/25/2024, 11:39 AMjacksorjacksor (Richard Jackson)
04/25/2024, 12:50 PMDean Leigh
04/25/2024, 2:20 PMnpm run preview
works perfectly thank youPrenders
04/25/2024, 2:24 PMDean Leigh
04/25/2024, 2:30 PMPrenders
04/25/2024, 2:31 PMSebastiaan
04/25/2024, 2:44 PMDean Leigh
04/25/2024, 7:52 PMSebastiaan
04/26/2024, 11:02 AMDean Leigh
04/26/2024, 11:23 AMSean Thorne
04/26/2024, 12:24 PMDean Leigh
04/26/2024, 2:43 PMmarcusjmsweden
04/29/2024, 7:07 PMmarcusjmsweden
04/29/2024, 7:07 PMPrenders
04/30/2024, 9:24 AMmarcusjmsweden
04/30/2024, 10:30 AMskttl
05/02/2024, 6:29 AMmarcusjmsweden
05/02/2024, 11:36 AMmarcusjmsweden
05/02/2024, 11:36 AMmarcusjmsweden
05/02/2024, 11:37 AMjacksorjacksor (Richard Jackson)
05/05/2024, 9:42 AMDean Leigh
05/05/2024, 10:13 AMPrenders
05/05/2024, 10:47 AMrickbutterfield
05/05/2024, 3:17 PMSebastiaan
05/06/2024, 8:15 AMjacksorjacksor (Richard Jackson)
06/14/2024, 6:39 AMmarcusjmsweden
02/03/2025, 2:17 PMmarcusjmsweden
02/03/2025, 8:21 PMSebastiaan
02/04/2025, 8:18 AMmarcusjmsweden
02/04/2025, 11:18 AMmarcusjmsweden
02/04/2025, 11:18 AMjacksorjacksor (Richard Jackson)
03/06/2025, 9:26 AM