Building dead simple landing page with waitlist for free

In this post I will show you how to build a highly performant landing page with waitlist for free.

You have just got a billion dollar idea and now you want to validate it. The first step will be building a simple landing with waitlist to gather interest of potential users. While there are a ton of tools like Framer, Carrd etc. some of them paid and free, but I will show you how I usually do it superfast and for free.

Building the Landing page using AstroJS and Tailwind CSS

AstroJS is an open-source web framework to build fast static website. Website build using AstroJS is lightening fast which ranks higher on search engines.

Tailwind is a very powerful CSS framework. It is widely used and known for its utility first classes and tiny CSS bundles.

Creating AstroJS Project and adding Tailwind

Create your AstroJS project

npm create astro@latest

when prompted with

How would you like to start your new project?

Select Empty

Further select your choices for other prompts based on your preferences and voila you have created your first AstroJS project

Add Tailwind to your project

You need to add tailwind in order to use Tailwind utility classes.

npx astro add tailwind

You will be prompted to enter your resposne for these configs

You can select yes for all of the options. If you are interested you can read about these on tailwind instalation page for what all of these means.

Awesome, now you have an Astro JS project with Tailwind installed.

Adding your content to landing page

Now you will have a directory structure similar to this

You can add as many pages as you want in

src/pages

directory. Index.astro page is for your main page, for now we will edit this page to reflect out content.

You can run this to see what is currently being displayed

npm run dev

You will see the output like this

Open the local url and you will see a blank page with Astro written in it. We need to replace the content in index.astro

Adding Header, Hero, etc.

We are using Tailwind for our CSS library for which you can find a lot of pre-built component. There are a lot of website which offers the free pre-built components. We will use Flowbite to get our component. I have picked this simple header for our use case, feel free to pick any other and tweak it based on your likings.

Header

<header>
	<nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
		<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
			<a href="https://flowbite.com" class="flex items-center">
				<img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
				<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
			</a>
			<div class="flex items-center lg:order-2">
				<a href="#" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">Join Waitlist</a>
			</div>
		</div>
	</nav>
</header>

You case use the above code. Replace the name and logo

Hero and other section

You can pick any other Tailwind componenet blocks and paste is below, make sure to have an email input in it. Feel free to code it yourself to give it a unique look.

Adding Baserow for email collection

Baserow is open source alternative of Airtable. Get started by creating a free account on baserow. Free tier gives you access to 1000 row which should be enough for your waitlist

Once you are in the baserow dashboard, create a database and a table, in the table add columns, e.g. email, name etc.

Now we have a baserow configuration in place, lets integrate it with our project. Baserow allows you access rows in your table using APIs, we are going to use it.

Create an API key

Go to setting and create an API key for your particular workspace,

make sure to give it only create access for the table that you created, uncheck all other boxes (this is important for security purpose).

Once done, grab your API key and go to Database you created. You will find an option for the API docs

Open the API docs and navigate to the waitlist table that you created. You will see an option to how to call API using different method, we need to call this API from our AstroJS app.

you can paste the below code in the <head> tag in index.astro file.

<script is:inline>
	async function submitForm(email) {
		const data =  {
		    	"email": email.value
		  	}
		const response = await fetch("https://api.baserow.io/api/database/rows/table/<TABLE_ID>/?user_field_names=true", {
  		method: "POST",
  		headers: {
  		  "Content-Type": "application/json",
				Authorization: "Token <API_KEY>",
  		},
			body: JSON.stringify(data)
  	});
	}
</script>

replace with your api key and tabel id. Now we have exposed submit form function which we can call when users submits their email. You can do so by calling this function on form submit.

<form action="javascript:submitForm(email);" ...> 

Congrats, you have made this so far. Now we have fully function AstroJS webapp capable of adding users to waitlist.

Now we need to host it somewhere.

Building and hosting on firebase

Firebase project creation

You can get started by creating a free tier firebase project and setup hosting, it really simple you need to follow the on screen instructions.

Once you firebase peoject is created, you can add firebase credentials to your project. Use the following command to add firebase to your project.

firebase login
firebase init

follow the on screen instructions, select the firebase project you created and select hosting, you can also choose GitHub actions for auto deployment if you are familiar with it. Once this setup is done, you will have a firebase.json file, make sure you have following:

{
  "hosting": {
    "public": "./dist/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

we have set the public build folder as ./dist.

Building and deploying

This is last step in which you will build the project and deploy it to Firebase.

Building the project

Building the peoject is super simple, you need to run:

npm run build

Once done, the project is ready to be deployed.

Deploying to Firebase 🚀

To deploy project to firebase, you need to run:

firebase deploy

That’s it, your project is live. If you have added custom domain to your project, you will be able to see that on your own custom domain.

Conclusion

Congratulations on setting up your new shiny landing page with waitlist for world to see. Go ahead and share it with your family/friends/community/.

There is a lot more you can do with it,

• You can create a fully functional website with AstroJS
• Setup CI/CD so that it automatically deploys when you make change and push it to GitHub/GitLab.

I plan to write more about it in followup posts.