Astro Integration #83

etmartinkazoo · 2022-11-12T21:21:49Z

etmartinkazoo
Nov 12, 2022

Is anyone aware of an integration with Astro?

Thanks!

KaneFreeman · 2022-11-14T21:12:34Z

KaneFreeman
Nov 14, 2022
Maintainer

I am not familiar with Astro (could you provide a link?). There is not an integration with any application by that name yet in the code base.

2 replies

elbotho Nov 15, 2022

https://astro.build/ is the site.
I think Astro and Netlify CMS would complement each other very well.

KaneFreeman Nov 15, 2022
Maintainer

Yeah, we could definitely look at this after the 1.0.0 launch. Should work with it quite well.

jkjustjoshing · 2023-02-10T02:44:55Z

jkjustjoshing
Feb 10, 2023

I have a proof-of-concept Astro site working, it was pretty straightforward.

Inside src/pages/admin I have 2 files - index.astro and config.js. My StaticCMS config is exported from config.js, and my index.astro looks like this:

---
import config from './config.js'
---

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Static CMS -->
    <script
      is:inline
      src="https://unpkg.com/@staticcms/app@^1.0.0/dist/static-cms-app.js"
    ></script>
    <script define:vars={{ config }}>
      window.CMS.init({ config })
    </script>
    <script
      is:inline
      src="https://identity.netlify.com/v1/netlify-identity-widget.js"
    ></script>
  </body>
</html>

I then threw this in the <head> of src/pages/index.astro:

    <script
      src="https://identity.netlify.com/v1/netlify-identity-widget.js"
      async
    ></script>
    <script>
      // Adds "netlifyIdentity" field to window typescript definition
      declare global {
        interface Window {
          netlifyIdentity: any
        }
      }

      if (window.netlifyIdentity) {
        window.netlifyIdentity.on('init', (user: any) => {
          if (!user) {
            window.netlifyIdentity.on('login', () => {
              document.location.href = '/admin/'
            })
          }
        })
      }
    </script>

6 replies

jkjustjoshing Apr 29, 2023

Possibly - you need to be able to pass the config into the CMS init function on the client, so you’ll need to convert it to JavaScript/json at some point.

You can probably load a Yaml file with node:fs, then use a Yaml parsing NPM module to convert it into JSON to pass to the <script> tag.

denyskon Apr 29, 2023

I don't know how Astro works, but shouldn't there be a way to put a file in the same directory as the index file? Then you won't need any conversions as if you used any other framework.

jkjustjoshing May 1, 2023

The client-side Static CMS javascript needs to be able to "see" the configuration file, so the configuration file contents need to be in the final build output.

Astro doesn't expose files in the pages directory directly, it compiles them. It'll basically ignore a YAML file in the pages directory (or compile it somehow? But I don't think it will). You could probably put the YAML file in the public directory to expose it to the compiled output, but I personally like co-locating related files in my codebase, and the config file and admin page seem related enough to want to keep them together. That's why I advocate for the solution that I propose in my original post.

enricogallesio May 1, 2023

Yes, I understand. Thank you very much!

jgbbob8 Mar 22, 2024

Could you please share the config.js file.... I can't get it to work

Skrubbadubba · 2023-03-07T12:29:12Z

Skrubbadubba
Mar 7, 2023

I'm also using Astro for my project, works without any issues. I'm using the same approach as @etmartinkazoo, but with bundling. Works very nicely since you can add a react build step to use for customizing pretty easily, even if you aren't using react for the rest of the project.

There is an integration for Netlify CMS that is listed by Astro in their documentation (https://github.com/delucis/astro-netlify-cms). The maintainer also has a blog starter template for Astro with Netlify CMS.

There is an open issue (delucis/astro-netlify-cms#61) from a while ago now, suggesting switching to Static CMS. Some have shown interest but the maintainer hasn't responded yet.

I could probably make a Starter for Astro if that is desirable - I am seeing more and more people around here asking Astro related stuff. However, I definitely think delucis is better suited for that (I'm quite inexperienced), assuming he shows interest in Static CMS. I would not know how to make an integration though.

1 reply

AdityaBanik Sep 3, 2023

I would really appreciate a starter guide, I am having trouble setting custom previews with astro.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Astro Integration #83

{{title}}

Replies: 3 comments 9 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Astro Integration #83

Replies: 3 comments · 9 replies

KaneFreeman Nov 14, 2022 Maintainer

KaneFreeman Nov 15, 2022 Maintainer

Replies: 3 comments 9 replies

KaneFreeman
Nov 14, 2022
Maintainer

KaneFreeman Nov 15, 2022
Maintainer