So, you’re going to build a Software as a Service (SaaS). You’ve got a great idea (and maybe even a bit of code), and you want to share your idea with the world.  Logically, you’ll need to set up a website that touts all the features of your SaaS.  A landing page isn’t a terribly difficult thing to code, but building off a template will simplify your work. But what else do you need?

• Authentication: You’ll need a way to authenticate users into the dashboard, and you might even want to offer different features based on the payment tier of your customers.
• After authentication - you’ll want a dashboard that shows off your product.
• Payment: You probably want to make money on your SaaS, so you’ll need a billing integration.
• Blog and docs pages. Share your knowledge and build content around why people should use your SaaS.

You could easily build each of these services yourself. Or buy different options from different companies and mash them all together to build your website. But the time and effort required to integrate all of these tools will take you and your team away from what matters - building your SaaS! What if you could quickly deploy one application and have all of these features in one package - for one low price? You can, using https://www.boilercode.co/ - and ship your SaaS website in a fraction of the time it would take to build all of this functionality from scratch.

In this post, we’ll walk through the steps you’ll need to deploy boilercode for your SaaS. We’ll use the NextJS SaaS boilerplate (https://www.boilercode.co/blog/nextjs-saas). Even better, with a 1 click deploy from tryDome, you can quickly have your entire website up and running in seconds - just customize it for your product and you are ready to go.

Setup

Let’s look at some of the configurations that are possible in the boilercode template.

Update the landing page

The landing page components can be found at /components/landingPage

Updating the Hero Section

The top of the Hero features a Product Hunt badge for Boilercode. You can update /components/elements/productHunt.js with your Product Hunt url and it will be featured at the top of your landing page. If you don’t want to feature Product Hunt on your site, just remove the reference on Line 53 of landingHero.js:

‍

Updating the text on the Hero section is made in this same section. As you can see, the  team was thinking about dessert as we explored this section of the code:

‍

‍

Sections with multiple objects

The landing page has several sections with multiple similar objects: Features, Testimonials and “Why use our product.”  Each of these objects form a box with a title, icon and text.  Here is a screenshot of the features section:

‍

Each of these sections have a page layout and config file. For example, for features we have  /components/landingPage/landingFeature.js and components/config/featureSet.js. The landingPage has the HTML to be updated, and the featureSet.js has a JSON array with JSON objects for each feature. You can see we have deleted Feature 2. Update the text and feature names, and you’ll have a beautifully detailed table that is fully responsive for different screens sizes.

The ”Testimonials” and “why use my SaaS” sections can be customized in much the same way.

What’s a SaaS without a Tiered billing offering?

The tiered pricing makes it easy to build a comparison table of the features in each of your offerings, and quickly integrate with either LemonSqueezy or Stripe product offerings.

Just like the features above, there are 2 documents - and they both have sample code to deploy either with LemonSqueezy (on the left) or with Stripe (on the right).  

Building, configuring and testing a landing page of this complexity would take days of your team’s time, while configuring this template can be done in a few hours.

Blogs and/or documentation

The template includes a blog folder where markdown blog posts can be added and immediately published into your blog.

Login

Your SaaS should have a dashboard where signed in customers can begin interacting with your SaaS. Boilercode handles both the login and the dashboard pieces of your website.

For Login, you’ll need to add a Google Oauth Client ID and secret to your environmental variables. The authentication also supports GitHub and other authentication OAuth services (these will require additional code).  

You can customize the login page with your own branding colors and images in the pages/api/auth/[...nextauth].js file:

	 
    theme: {   
      colorScheme: "auto",   
      brandColor: "#FFFFFF",   
      logo: "/favicon.ico",   
      buttonText: "#000F00", 
      },
	

‍

The Dashboard

Once your customers have signed into the website, they will want to see your SaaS, and begin to use it. The dashboard can be configured to deliver various React components. By default, the template comes with DALL-E, Pinecone and LangChain integrations (just add your API keys to the env.local file).  For your SaaS, you might need to display API keys, display your tooling - or maybe both. Build your components in React and insert them into your dashboard - and you’ll be sure that they only appear to customers who are authenticated.

Conclusion

When you are building your SaaS, you need to focus on the application you have created, and how your customers will interact with it.  You probably won’t have a lot of extra time to build your website - especially not if you have to integrate a number of different tools to complete all the features you require.

The Boilercode template is a SAAS in a box - a one stop webpage that gives immediate auth, billing, blog, landing page and dashboard functionality. With all of these features available for under $200, you can have your entire SaaS website up and running in a fraction of the time, and a fraction of the cost. Launch your Boilercode template with Dome, and you can be up and running in no time!

‍