Cover Image Credits: Photo by Edu Lauton
RedwoodJS prides itself as the full-stack framework for the Jamstack.
In this tutorial, we are going to learn about RedwoodJS and how to initialize a new RedwoodJS application.
At the end of this tutorial, you will learn how to bootstrap a RedwoodJS (RwJS) application, understand the RwJS project file structure, and the RwJS philosophy for a full-stack approach to JAMstack application development.
To follow this tutorial you should be familiar with the following:
Yarn Package Manager - should be installed on your machine
Prisma - The GraphQL ORM
The Jamstack Philosophy - If you have no idea what Jamstack is please read more about it here.
What is RedwoodJS?
According to its documentation, Redwood is an opinionated, full-stack, serverless web application framework that will allow you to build and deploy JAMstack applications with ease.
Understanding what RwJS is and why you should adopt it
Redwood is integrated with technologies like React, GraphQL, custom Auth and a couple of other tools out of the box.
Redwood aims to empower you to focus on building what matters without focusing your energy on choosing technologies or tooling that eat up development time.
The features and capabilities of RwJS
Here are some of the features of Redwood:
- Redwood is open-source ❤️
- Standard file structure to support seamless backend and frontend development
- Automatic page-based code-splitting (similar to Gatsby, NextJS)
- GraphQL API construction without the need for a boilerplate
- Dynamic data-fetching from the API on the frontend
- Generators for your frontend application (saves a lot of time)
- Easy deployments to Netlify, Vercel, Render and Serverless 😍
- Continuous feature upgrades over-time 🔥
For more information on Redwood features please refer to the documentation.
Bootstrapping our RwJS application
Redwood uses Yarn to initialize an application and requires the following version of
yarn to work properly:
node =14.x yarn =1.x
- Run the command below in your terminal to create a new Redwood app:
yarn create redwood-app ./thankful
This will start the process of creating a fresh application from scratch and installing the
create-redwood-app package globally on your machine using Yarn. Once the process is complete, you'll find a
thankful directory which is where all of our application's files will live moving forward.
Starting our RwJS application
- Move into the application directory
- Start the application in development
A browser window will automatically open up to the URL
yarn redwood dev
http://localhost:8910showing the screen below:
Well done, our application is up and running and ready for development. 🎉
Understanding RwJS File Structure
Let's take a look at the file structure of our app. We will ignore the configuration files for now and focus on the core app directories
In Yarn, these are called
workspaces but Redwood calls them
sides. When installing packages moving forward we will make use of these.
We will learn how to work with these soon.
API directory contains all files and logic for our server, database configurations, business logic, graphQL setup, and serverless functions. In summary, this is our backend server directory.
web directory is where the code for our frontend app lives. Redwood by default configures our routes, layouts, and pages for our application.
In this tutorial we have learned what RedwoodJs is, the problem Redwood aims to solve, how to start a Redwood project from scratch and how to understand the file structure of a Redwood project.
I will suggest you go ahead and create a repository on GitHub and push your application to it, as we will want to keep track of our progress moving forward. If you aren't familiar with how to do this, you can find more information in the Resources section.
- Yarn Package Manager
- Redwood Official Website
- Redwood Documentation
- How to Push an Existing Project to GitHub
Next, we will learn How to Add a Postgres Database and Generate Models in a Redwood App