Wasp-lang•10mo ago

OpenSaas Blog deployment

Hey folks, what's the best way to deploy blog for OpenSaas? From what I see - it's a totally separate app that should be hosted elsewhere. Any guides on this?

20 Replies

martinsos•10mo ago

@Vinny (@Wasp) will know the best!

maksym36uaOP•10mo ago

Deployed to Fly.io: changed the internal_port to 4321 in the fly.toml and exposed it in the dockefrile, since looks like it's the port Starlight uses. ~~They don't have any deployment docs lol 🫠~~ Starlight does not, Astro does When I'm opening the page (https://toasttracker-blog.fly.dev/) - it freezes and tries to connect. But despite Starlight explicitly says it's on port 4321 (check the screen) - it does not accept requests. Probably I'm missing something @Vinny (@Wasp) you've deployed Starlight to Fly or somewhere else?

martinsos•10mo ago

So I know very little, but Starlight is an Astro template, from what I know, some like OpenSaas is a tempalte for Wasp, so it should be deployed the same way Astro is deployed, I think? I am just giving ideas while waiting for @Vinny (@Wasp)

maksym36uaOP•10mo ago

Yep, I updated my comment while you were typing 😁 I'm looking into Astro now. Anyway, I think it will be useful to figure out how to properly deploy the blog part (since it's half of the OpenSaas template) and update the OpenSaas deployment page (https://docs.opensaas.sh/guides/deploying/) as well. I'm pretty sure I won't be the last one who asks this hehe

OpenSaaS.sh

Deploying

Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.

martinsos•10mo ago

Yeah you are right, we should do that for sure!

maksym36uaOP•10mo ago

@martinsos @Vinny (@Wasp) I've used this guide that depends on GoStatic. https://blog.codybrunner.com/2024/deploying-astro-to-fly/static-deployments/ The only thing - you need to remove [[services.concurrency]] section from the fly.toml. For some reason flyctl been unable to parse that section

✘Unknown type for service concurrency: []interface {}
Error: App configuration is not valid

maksym36uaOP•10mo ago

FYI: It's impossible to add google analytics to Starlight. Project structure is different from the regular astro (starlight relies on Markdown files), and there's no index.astro anymore that is used in official astro-google-analytics integration https://astro.build/integrations/6/ I'm trying to find a way to inject the script on page render, will share what I'll find. Mentioning it since 4th line is not working with 2nd line of OpenSaas docs and I'm sure there will be questions about that also

maksym36uaOP•10mo ago

UPD: injected it via the head config (first screenshot). Looks ugly 😂 No idea if it's a preferred way to do this, since Astro officially suggests to use their package and inject into the head section of the .astro file (second screenshot), but it works

Vinny (@Wasp)•10mo ago

Hey @maksym36ua so I deployed it to netlify since it’s just static site and that’s what netlify excels at

Vinny (@Wasp)•10mo ago

https://wasp-lang.dev/docs/advanced/deployment/manually#netlify

Deploying Manually | Wasp

We'll cover how to deploy your Wasp app manually to a variety of providers:

Vinny (@Wasp)•10mo ago

In the long run it will probably be better for us to create our own integrated blog but this will take more time and didn’t seem like a priority to begin with, hence why we defaulted to Astro I never thought about analytics for the blog to be honest. Have you tried asking in the Astro discord? Theres one guy, HiDeo, who is their starlight expert Oh nice!

maksym36uaOP•10mo ago

The blog part should have analytics because it's the entry point for SEO and content marketing efforts. I'm building an app that will rely on SEO as the primary source of leads, so I'm more interested in the blog having analytics than the WASP app itself 😁 That would probably be the thought process for some of the other OpenSaas users. That's why I'm broadcasting my learning process (I assumed it might be helpful for you). Since I'm familiar with Wasp and it's described well in the docs - the blog part was the only issue. It would be nice to have at least some info on how/where it is preferable to deploy it and how to integrate analytics with it (since it's part of the OpenSaas package and there's no explicit info on that in Astro/Starlight docs). I might end up asking in the Discord, but since it's already working that's not the priority 😁 I've spent three hours researching from scratch how to deploy Astro + Google Analytics, imagine how much time can be saved for OpenSaas folks if that would be pointed out in your docs Hope my findings help!

Vinny (@Wasp)•10mo ago

Oh yeah this is very helpful. I’m going to document this better now Thanks Max 🙏 which config file did you inject it into? ah nevermind I found it in the astro.config.mjs file ok that's a decent workaround rather than the NPM package

Vinny (@Wasp)•10mo ago

ok cool. ADDED! https://docs.opensaas.sh/guides/analytics/#adding-analytics-to-your-blog https://docs.opensaas.sh/guides/deploying/#deploying-your-blog thanks for the heads up, Max

OpenSaaS.sh

Deploying

Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.

OpenSaaS.sh

Analytics

Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.

Vinny (@Wasp)•10mo ago

actually, @maksym36ua is yours working?, wouldn't you need to add attrs, e.g.:

      head: [
        {
          tag: 'script',
          attrs: {
            async: true,
            src: 'https://www.googletagmanager.com/gtag/js?id=G-8QGM76GR3Q',
          },
          content: `
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());
            gtag('config', 'G-8QGM76GR3Q');
          `,
        },
      ],

      head: [
        {
          tag: 'script',
          attrs: {
            async: true,
            src: 'https://www.googletagmanager.com/gtag/js?id=G-8QGM76GR3Q',
          },
          content: `
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());
            gtag('config', 'G-8QGM76GR3Q');
          `,
        },
      ],

narrowgate•10mo ago

Having just read this thread, thanks @maksym36ua for asking about the blog aspect of the open-saas template. I have been trying to learn web dev via open saas template and wasp and noticed that it was something I had to launch in a third terminal window (postgres, wasp app, and blog).
From a total newbie perspective and just as another voice/perspective regarding this topic, it would be awesome to have some sort of blog integrated into the main stack. I don't know enough to intelligently speak about Astro but it looks like it provides a framework for both docs as well as blog which is appealing. It just appears that is adds another layer of orchestration complexity come deployment time. However, I really don't know much on this topic so please help clear up my understanding on this @Vinny (@Wasp)

maksym36uaOP•10mo ago

@Vinny (@Wasp) here's the full head section

 head: [
        {
          tag: 'script',
          attrs: {
            src: 'https://www.googletagmanager.com/gtag/js?id=G-X5S94CTXLK',
          },
        },
        {
          tag: 'script',
          content: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
        
          gtag('config', 'G-X5S94CTXLK');
          `,
        },
      ],

 head: [
        {
          tag: 'script',
          attrs: {
            src: 'https://www.googletagmanager.com/gtag/js?id=G-X5S94CTXLK',
          },
        },
        {
          tag: 'script',
          content: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
        
          gtag('config', 'G-X5S94CTXLK');
          `,
        },
      ],

Vinny (@Wasp)•10mo ago

ah nice. thanks for sharing that. mine was worng yep. this is what I considered doing from the beginning. unfortunately, I saw it as less important than the other features (stripe payments, auth, landing-page, admin dashboard). using Astro saves us a ton of time versus building our own integrated blog. Maybe there's a quick way to implement one, but this seemed like a good tradeof for the time being. Anyway, I added deployment docs for the blog to https://docs.opensaas.sh now too so that should help

narrowgate•10mo ago

@Vinny (@Wasp) Of course ... so many things to gain from not having to reinvent a bigger wheel and sacrifice a bit of parsimony in the deployment (especially under the constrained resources 🙂 ). So from what you have mentioned earlier in this thread .. you currently recommend deploying the SaaS portion to Fly and the static blog/docs portion to netlify?

Vinny (@Wasp)•10mo ago

yep!

Gaming

Programming

OpenSaas Blog deployment