Building a Full Stack Application using RedwoodJS

Building a Full Stack Application using RedwoodJs

Building a Full Stack Application using RedwoodJs

This article explains how to build a full-stack application using redwoodjs. we will learn how to build some of the important modules such as authentication, data fetching, and forms in an application using redwoodjs.

Demo

Here, we will be building a simple recipe application which contains Authentiation, Data fetching and Forms in it.

What is RedwoodJS

RedwoodJS brings the style of JAMstack full-stack application development. if you love to build applications in a JAM stack way. you will fall in love with redwoodJS for sure.

Redwood helps you to bring your application to the ground as easily as possible. Most of the time, we spend the time setting up a client/server-side architecture rather than writing our business logic. using redwood, we just need to worry about our application business requirement. it helps us to set up and get started within a few commands.

How it works

Client and Server-Side in a Mono-Repo Folder Structure

Client and Server-Side in a Mono-Repo Folder Structure

Here, we have the client and server-side in a mono-repo folder structure where API stands for backend infrastructure and web stands for the frontend of our application.

Setup

Note: I assume that you have installed yarn or node. if not, install nodejs in your machine and make sure it’s installed properly.

Let’s get started by running the command

it creates the redwood application scaffold inside the folder recipe-app with all the boilerplate required to run the application.

you can run the application using the command,

Note: ‘rw’ stands for redwood. you can either use redwood or ‘rw’ in the command line.

Now, that we have a boilerplate. let’s see the business domains of our application.

Domain Model

Domain Model

Domain Model

Here, we have user and Recipe domains. an application user story will be like,

User Story

  1. Users can log in and Signup into the application and view all the recipes created by different users.
  2. Users can create a Recipe and publish it for other people it sees.

Now, that we know the functionalities of our application. Let’s start by building the authentication system for our application.

DB Setup

Now, that we have user stories and domain models. let’s create the DB table. redwood exclusively uses Prisma 2.

Note: if you’re new Prisma, check out this article

go to api/prisma/schema.prisma and create the models for User and Recipe and connect Postgres

Here, we connect Prisma with Postgres. run the Postgres in your local machine and connect to it using the connection string.

Here, i am using docker to run the Postgres in local machine. you can read more about this in official docs

After that, we create models such as User and Recipe with the required attributes for our Postgres tables.

One important thing to note here is a foreign key reference in the Recipe model. In Prisma, we can declare the reference using @relation field in model along with the fields and references in it.

Prisma relations Docs

Once we complete the Prisma model, we can deploy it using the commands,

it saves our changes to the prisma

above command, migrates our changes to postgres database.

Authentication

Let’s examine the in-built authentication system that redwood provides us.

https://redwoodjs.com/tutorial/authentication

Redwood provides Auth0 and Netlify Auth out of the box. that’s cool. we don’t need to build one for ourselves. But, still, sometimes, we might need to create our own auth system instead of using the third party.

Actually, there’s a discussion in the redwood community explaining why we don’t need one. checkout the thread.

I would say, I am exploring this part. it is always good to have options in the implementation. so, I wanted to roll-out my own auth system and see if it really works out.
spoiler alert: it was not easy and made only possible by a workaround in the frontend part.

Okay, enough about the talk, let’s see how I built the Auth. let’s start from the backend part.

For API, we need loginUser  and createUser in the graphql and graphql resolvers. before creating graphql resolvers in our application, let’s see how redwood structures our backend code.

Structure of Backend Code

Structure of Backend Code

let’s explore the directory structure one by one and see the functionalities of it.

  • functions – it contains serverless functions that we need to run to.
  • graphql – it contains all the graphql sdl files of our business domains. for our application, it will contain sdl for user and recipe.
  • lib – we can add the utility functions here. as of now, it contains the Prisma client instance.
  • service – it contains all the graphql resolvers for our application.

So far, we have seen the structure and its functionalities. let’s create the graphql and resolvers for authentication.

we can create the sdl and services using the command,

the above commands, create sdl and it’s respective service folders for us with all the CRUD logic for the specified domain.

As of now, our resolvers will contain createUser function which will have the db insert command. but, we can’t directly insert the password into the DB. so, let’s hash it before insert.

To do that, we need to install becryptjs and we also need jsonwebtoken to generate jwt

Now, add to functions inside the services/users/users.js 

Other functionality would remain the same. you can test the login and signup functionality in graphql playground.

Login and Signup Functionality in Graphql Playground

Login and Signup Functionality in Graphql Playground

Login and Signup Functionality in Graphql Playground

Login and Signup Functionality in Graphql Playground

Now, that we have backend api ready. let’s create the frontend part of it. we can create components using the command,

above commands, creates the page for us along with routes. we just need to edit the page components and we are good to go.

Here, we have a form on submitting we get the data from the state and call the useMutation from redwood which is a wrapper on apollo graphql react hooks.

an important thing to note here is, we store the authToken in localStorage to implement the protected routes.  Once login is successful, we redirect the user to home route. redwood provides the routes wrapper too.

In a same way, create the Signup page component.

Now, that we have a complete authentication system for our application. let see how to create a recipe in application. we might need to implement a form.

Create a Recipe

so far, we have seen how to build an authentication system. let’s add a functionality to create recipe.

Backend

Firstly, let’s add the api for it and then frontend components.

change graphql/recipes.sdl.js to add the create recipe and other functionalities in the recipe.

Also, change service/recipes/recipes.js to add the functionalities in resolvers.

Frontend

create a page for recipe using the command,

Now, we need to add functionalities for recipe page component.

Now, that we have add recipe functionality in our application.

Recipe Form

Recipe Form

Data Fetching

Here we come to the final stage of the tutorial which is fetching the recipes from server and show it to the dashboard.

Redwood uses a concept called cell which helps the process of data fetching. it provides the state of loading , error and data.

Main purpose of having cell is separating the functionalities of data fetching outside from the component. so that, we can reuse the cell in other components as well.

let’s create a recipe cell which fetches the data from the server and show it the home page.

create a cell using the command,

After that, we need to add the rendering component based on the recipe data.

Conclusion

We learned how to build a full-stack application using redwoodjs. I hope this article covered some of the important modules for building a full-stack application. Note that, redwood is still under development and not ready for production yet. So,  learn the concept of redwood and keep an eye on it. it can become a new way of building a full-stack application.

Complete source code can be found here

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #17: Stat screen

Now, we are going to implement the final chapter for this tutorial series where we are implementing a graphical representation section on our ...

21.10.2020

Verifying an Email Address Without Sending an Email in NodeJS

Almost every platform on the internet needs to be able to uniquely identify its users, and email addresses are the most common mechanism for ...

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy