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
- Template – divide Landing page into React components
- Web app generation with RedwoodJS – generate web app with Home page and components with Tailwind CSS UI support
- Components design – use template code to customize design of components
- 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:
- Header – Header
- Hero – Hero
- Logos – Logos
- Selling Points – SellingPoints
- Product Features – ProductFeatures
- Team – Team
- Testimonials – Testimonials
- Blog Posts – BlogPosts
- Newsletter Form – NewsletterForm
- Footer – Footer
2. Web app generation with RedwoodJS
Now we need:
- generate an app
- create Home page
- generate all 10 components
- 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
And here we are: the project is online at https://redwood-tailwind-saas-landing.vercel.app 🥳
GitHub source
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
…
Top comments (1)
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).