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
-
Go to Netlify.
-
Sign up for a free account if you don’t already have one.
-
Go to Sites > Import an existing project > Import from Git.
-
Choose the Git provider that hosts your
hello-saasrepository 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. -
Configure the Netlify site settings to build and deploy your app.
-
Choose the branch you want to use to deploy. This should be the
mainfor now. -
You can leave the Base directory empty.
-
In the Build command field, copy and paste the following:
npm run build:netlify -
In the Publish directory field, type
build. -
Click Deploy <your site>.

-
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.
-
Go to
light-modules/react-minimal-lm/templates/pages/. -
In the
basic.yamlandcontact.yamlfiles, change thebaseUrlfield 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. 
-
Push your changes to your remote
hello-saasrepository.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.
-
In your browser, go to your Magnolia SaaS subscription.
-
Go to the Pages App.
-
Open a page and change the text in one of the components.
-
Return to the Pages app browser view and select your newly edited page.
-
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. -
Go to your Netlify URL and see your changes.
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.
Other learning paths are to:
-
Look more deeply into the the code and configuration of this Hello SaaS project.
-
Read the Concepts section.
-
Dig into the Developer experience section.
-
Check out the Magnetic demo project which shows Magnolia SaaS in an actual use case.