Deploy the app to Netlify

Hello SaaS

For the purposes of this tutorial, we will deploy this simple application to Netlify. This allows you to see how you can edit in Magnolia and see changes reflected directly via your deployed URL.

Set up Netlify

  1. Go to Netlify.

  2. Sign up for a free account if you don’t already have one.

  3. Go to Sites > Import an existing project > Import from Git.

  4. Choose the Git provider that hosts your hello-saas repository and authentify.

    If you don’t see any repositories listed after authentication, click the Configure Netlify on GitHub (or whichever Git provider you use) link. Follow the on-screen instructions to enable access to the Git repositories you want to import.
  5. Configure the Netlify site settings to build and deploy your app.

    1. Choose the branch you want to use to deploy. This should be the main for now.

    2. You can leave the Base directory empty.

    3. In the Build command field, copy and paste the following:

      npm run build:netlify
    4. In the Publish directory field, type build.

    5. Click Deploy <your site>.

      netlify git build settings

Connect Magnolia to Netlify

Here, we’ll tweak your page yaml files to point to the Netlify URL instead of the localhost:3000 that you used previously.

  1. Go to light-modules/react-minimal-lm/templates/pages/.

  2. In the basic.yaml and contact.yaml files, change the baseUrl field to the URL of your Netlify app.

    light-modules/react-minimal-lm/templates/pages/*.yaml
    ...
    baseUrl: https://hello-saas.netlify.app/ (1)
    dialog: spa-lm:pages/basic
    ...
    1 The URL of your Netlify application. This can be found on Netlify in Site overview.

    netlify site url

  1. Push your changes to your remote hello-saas repository.

    git add .; git commit -m "Configure URLs for Netlify deploy"; git push origin main

Check it’s working

Make any change to your content in Magnolia, publish, and see the changes reflected directly via your deployed URL.

  1. In your browser, go to your Magnolia SaaS subscription.

  2. Go to the Pages App.

  3. Open a page and change the text in one of the components.

  4. Return to the Pages app browser view and select your newly edited page.

  5. Click the Publish action in the action bar.

    You must publish all pages and any assets used in those pages to be able to see them on your front-end server.
  6. Go to your Netlify URL and see your changes.

Congratulations!

You now know the foundations of developing for Magnolia SaaS! We encourage you to keep building and experimenting hands-on based on this tutorial project.

Next steps

Other learning paths are to:

Feedback

SaaS

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia SaaS docs.

Main doc sections

DX Core Headless SaaS PaaS Legacy Cloud Incubator modules