loading...
Cover image for a first look at redwood.js - part 1

a first look at redwood.js - part 1

ajcwebdev profile image anthonyCampolo Updated on ・7 min read

I like to think that most things can be achieved. Whatever you have in your head you can probably pull off with code as long as it's possible within the constraints of the universe. It's just a matter of time...and money...and attention.

Tom Preston-Werner - Full Stack Radio 138

Redwood is an opinionated, full-stack, serverless web application framework for building and deploying JAMstack applications. This article is very similar to a first look at Blitz.js where I documented my first time installing and setting up a Blitz.js application. I will be making a few comparisons to Blitz so you may want to check it out.

I've structured the article to reflect the actual process I go through when experimenting with a new framework for the first time. I stick to the path laid out in the official docs tutorial, but as I go through each step I reference the documentation for each command or component. This helps me build a mental model of the framework instead of just copy-pasting commands and code snippets.

I will start at the very beginning and assume no prior knowledge of Redwood although I do assume a basic knowledge of React. But I'm talking really basic, if you know what a component is, have written at least a dozen lines of JSX, and have generated at least one project with create-react-app then you'll be fine.

If none of that made sense you should click the link to the create-react-app docs and work through those before reading this. This article is geared towards someone who has at least a few months experience in a coding bootcamp or on the job, around the point where they start getting comfortable with the basic workflows of git, npm, the terminal, and simple HTML websites.

You'll need yarn for this tutorial which has slight differences from npm. If you've never used yarn you can find installation instructions here or just enter yarn install into your terminal.

yarn create redwood-app

The first step is to install Redwood globally to my system and generate our first project. We'll accomplish both of these with the yarn create command.

01-yarn-create-redwood-app

This will create a folder called ajcwebdev that holds all the code that will be generated. You can call your project anything you want, just make sure to keep using your name anytime I use ajcwebdev in a terminal command.

02-yarn-creating-redwood-app

yarn redwood dev

yarn rw is the same as yarn redwood and can be used to save a few keystrokes if you want. We'll cd into that folder and then start our development server.

03-cd-yarn-redwood-dev

yarn redwood dev can be used to run a development server for the Redwood server, Webpack server or your database "server" which isn't exactly a server.

04-yarn-redwood-dev

Don't worry about any of that for now but that'll be important in later articles.

You may also get an error that says Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again.

05-prisma-error

For the rest of the stuff I do in this article I did not have any trouble so I'm going to be ignoring that for now.

Our server is now running on localhost:8910 (a mnemonic to help remember that is thinking of counting 8-9-10). Open a web browser and enter localhost:8910 into the address bar. If you've done everything correctly up to this point you'll see the Redwood starter page.

06-redwood-starter-page

WHOOPS, it worked, we're up and running.

Don't worry too much about what it says about custom routes, we'll talk about that in the next article. Lets look at the file structure that has been created for us.

07-project-structure

Don't worry about most of this, for the purpose of this article we'll only be working in the web folder. Since we are responsible developers the first thing we do is go to the README.

08-README

The README provides instructions for the commands that we used earlier to get our application set up, yarn install and yarn redwood dev. It also mentions something you may have noticed earlier, we have something else running on localhost:8911.

09-serverless-functions

Once again, don't worry if that doesn't make sense since it's outside the scope of this article.

If you read my Blitz article I mentioned that our frontend and backend code each live in their own folders called app and db.

In Redwood our frontend code is contained in the web folder and our backend code is contained in the api folder. I can already hear both teams pulling their hair out at this so don't get too hung up on the comparison.

Beyond that high level comparison there are many significant differences between what is actually contained in those folders for each project that will become important once we start working more with our database and API in future articles. I only mention it because people are going to try and compare these frameworks and that's okay, it's all part of the learning process.

Brandon was already kind enough to lay out some key differences and I hope both teams embrace answering questions about each other to help new developers broaden their knowledge base.

Lets now look at our web folder.

10-project-structure-web

Redwood structures the web folder a bit like create-react-app projects with a public and src folder but the index.html file that renders our root component is in the src folder instead of public. This is another difference I've noticed from Blitz which keeps its public folder in the root project folder.

redwood generate page

With our application now set up we can start creating pages. We'll use the generate page command to create a home page and a folder to hold that page.

11-yarn-redwood-generate-page-home

This created files for our home page and another file for testing that page.

12-yarn-redwood-generating-HomePage

Since I only entered home it will use that to name both the folder and the component file but you can specify each if necessary.

13-project-structure-web-src-pages

Return to your browser and you will now see a new page instead of the landing page.

14-HomePage

Let's look at the code that was generated for this page. It's a component called HomePage that returns a <div> with a header <h1> and a paragraph tag <p>.

15-HomePage-component

This should be pretty self-explanatory if you have experience with React. If this doesn't look familiar to you then you should take a little time to study React by itself before jumping into Redwood. Now we'll edit the page and see what happens.

16-HomePage-edit

Feel free to include links to your own social accounts. With those changes made return to your browser.

17-HomePage-new

Now we are going to generate our about page.

18-yarn-redwood-generate-page-about

Like before we created an AboutPage component inside of an AboutPage folder along with a file for testing that page.

19-yarn-redwood-generating-AboutPage

We don't yet have a link to get to it from the home page, so for now you'll need to enter the route manually into your browser address bar by adding /about after localhost:8910.

20-AboutPage

Open up the code and it's another React component much like the last! Components are kind of a big deal in React.

21-AboutPage-component

We can also edit this page just like the home page.

22-AboutPage-edit

With those changes return to your browser.

23-AboutPage-new

We can also see these files have been added to our src folder.

24-project-structure-web-new

In the next part we'll take a look at Redwood's router and create links for the pages we created.

Posted on Jun 21 by:

Discussion

markdown guide