Doug Sillars, DevRel
Jan 23, 2024
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?
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.
Let’s look at some of the configurations that are possible in the boilercode template.
The landing page components can be found at /components/landingPage
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:
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.
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.
The template includes a blog folder where markdown blog posts can be added and immediately published into your blog.
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:
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.
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!