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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
Redwood structures the
web folder a bit like create-react-app projects with a
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.
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.
This created files for our home page and another file for testing that page.
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.
Return to your browser and you will now see a new page instead of the landing page.
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
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.
Feel free to include links to your own social accounts. With those changes made return to your browser.
Now we are going to generate our
Like before we created an
AboutPage component inside of an
AboutPage folder along with a file for testing that page.
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
Open up the code and it's another React component much like the last! Components are kind of a big deal in React.
We can also edit this page just like the
With those changes return to your browser.
We can also see these files have been added to our
In the next part we'll take a look at Redwood's router and create links for the pages we created.