React components SaaS startup landing with RedwoodJS and Tailwind CSS in 10 minutes

Hi there! Working in tech for 10+ years I always look for efficient solutions. Here I share with you a recipe to build React components landing page in 10 minutes using RedwoodJS framework and Tailwind CSS as UI. This is the first major step for a beautiful and easy-to-grow Jamstack web app.

Initial setup

We have the following:

• RedwoodJS to manage creation and development of the app
• Tailwind CSS as UI
• Basic SaaS Landing template https://tailwindtemplates.co/templates/basic
• Vercel for deployment
• GitHub

Steps to follow

1. Template – divide Landing page into React components
2. Web app generation with RedwoodJS – generate web app with Home page and components with Tailwind CSS UI support
3. Components design – use template code to customize design of components
4. Deployment to Vercel – deploying our web app to Vercel using GitHub

1. Template components

First of all we present our Landing page template as sequence of components and their React names:

1. Header – Header
2. Hero – Hero
3. Logos – Logos
4. Selling Points – SellingPoints
5. Product Features – ProductFeatures
6. Team – Team
7. Testimonials – Testimonials
8. Blog Posts – BlogPosts
9. Newsletter Form – NewsletterForm
10. Footer – Footer

2. Web app generation with RedwoodJS

Now we need:

1. generate an app
2. create Home page
3. generate all 10 components
4. include all 10 components to the Home page

yarn create redwood-app redwood-tailwind-saas-landing

I use JavaScript version and init Git repo (you can use TypeScript version if needed). It took me 136.61s (~ 2 mins):

cd redwood-tailwind-saas-landing
yarn redwood dev

You'll see the splash screen of RedwoodJS on a local dev server (http://localhost:8910):

Then we will generate our Home page:

yarn redwood generate page home /

Then we need to generate all 10 components (rw is a shortcut for redwood):

yarn rw g component Header
yarn rw g component Hero
yarn rw g component Logos
yarn rw g component SellingPoints
yarn rw g component ProductFeatures
yarn rw g component Team
yarn rw g component Testimonials
yarn rw g component BlogPosts
yarn rw g component NewsletterForm
yarn rw g component Footer

We have all components generated – now it's time to open project folder in VS Code and import and add components to the Home page.

Importing components:

Adding components to the Home page:

Starting again local development server to see the results:

yarn rw dev

And we see our React components structure on the Home page 🥳

Next step is to set up Tailwind CSS UI and use design template for our React components.

3. Components design with Tailwind CSS

On this step we need to:

• set up Tailwind CSS
• add components HTML code from the template

Setting up Tailwind CSS UI:

yarn rw setup ui tailwindcss

We open every component's code and add HTML code converted to JSX using some tool like Transform Tools: HTML to JSX:

Then we add JSX code to component's code (web/src/components/Hero/Hero.js):

Here is what we see with Head and Hero components added (we will global styled at the end):

Then we continue with the other components and do some clean up – update pictures to hi-res ones from Unsplash and remove jQuery and it's plugins/libs:

jQuery is not right option to do animations & elements like Sliders in React apps and must be removed. Now animations are done using React components & CSS

And here we are – we have React components-based template now:

The next step is to deploy this app to Vercel via GitHub.

4. Deployment to Vercel

The steps are quite straightforward:

• commit all changes to GitHub repo
• deploy on Vercel selecting this repo

Selecting our repo:

Starting Deploy:

---

And here we are: the project is online at https://redwood-tailwind-saas-landing.vercel.app 🥳

---

GitHub source

smartykit / redwood-tailwind-saas-landing

README

Welcome to RedwoodJS!

Prerequisites

• Redwood requires Node.js (>=14.19.x <=16.x) and Yarn (>=1.15)
• Are you on Windows? For best results, follow our Windows development setup guide

Start by installing dependencies:

yarn install

Then change into that directory and start the development server:

cd my-redwood-project
yarn redwood dev

Your browser should automatically open to http://localhost:8910 where you'll see the Welcome Page, which links out to a ton of great resources.

The Redwood CLI

Congratulations on running your first Redwood CLI command From dev to deploy, the CLI is with you the whole way And there's quite a few commands at your disposal:

yarn redwood --help

For all the details, see the CLI reference.

Prisma and the database

Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the schema.prisma file in api/db and replace the UserExample model with the following Post model:

model

…

View on GitHub

Comments

[Fyodor]

That’s awesome 👏 I like such an efficient approach to prototyping and hacking a quick solution 👍 redwood seems to be ideal for that in terms of further scaling with its generators (as opposed to other starter templates and solutions).