DEV Community

loading...
Cover image for a first look at redwoodJS part 1 - setup, pages

a first look at redwoodJS part 1 - setup, pages

ajcwebdev profile image anthony-campolo 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

Note: Redwood has not yet reached v1.0 and this material is subject to change. All code samples and commands will be for the current version (v0.28.3)

Part 1 - Setup, Pages

RedwoodJS is a fullstack, serverless framework for the Jamstack. 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, you'll be fine if you:

  • Know what a component is
  • Have written at least a dozen lines of JSX
  • Have generated at least one project with create-react-app

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 series is geared towards someone who has at least a few months experience, around the point where they start getting comfortable with the workflows of git, npm/yarn, and the terminal.

You will need yarn for this tutorial which has slight differences from npm. You can find installation instructions here or just enter npm install -g yarn.

1.1 yarn create redwood-app

The first step is to create our Redwood project. You can call your project anything you want, just make sure to keep using your name anytime I use ajcwebdev-redwood in a terminal command.

yarn create redwood-app ajcwebdev-redwood
Enter fullscreen mode Exit fullscreen mode
success Installed "create-redwood-app@0.28.3" with binaries:
      - create-redwood-app
    ✔ Creating Redwood app
    ✔ Creating directory '/Users/ajcwebdev/projects/ajcwebdev-redwood'
  ✔ Installing packages
    ✔ Checking node and yarn compatibility
    ✔ Running 'yarn install'... (This could take a while)

Thanks for trying out Redwood!

We've created your app in '/Users/ajcwebdev/projects/ajcwebdev-redwood'
Enter fullscreen mode Exit fullscreen mode

This creates a folder called ajcwebdev-redwood holding all the generated code. It also provides a handy-dandy guide to a list of community resources.

Join the Community

Get some help

Stay updated

Become a Contributor

Come hang out with us, we're super fun!

yarn rw is the same as yarn redwood and can be used to save a few keystrokes. Before entering the next commands create an empty repository on GitHub.

Initialize git repo

cd ajcwebdev-redwood
git init
git add .
git commit -m "Nailed it"
git branch -M main
git remote add origin https://github.com/ajcwebdev/ajcwebdev-redwood.git
Enter fullscreen mode Exit fullscreen mode

Push to main

git push -u origin main
Enter fullscreen mode Exit fullscreen mode

#pushtomain club; feels like github should give me an achievement for that.

Dominic Saadi after pushing to main

1.2 yarn redwood dev

Start the development server

yarn rw dev
Enter fullscreen mode Exit fullscreen mode
✔ Generating the Prisma client...

api | Running at 'http://localhost:8911'
api | Watching files in '/Users/ajcwebdev/projects/ajcwebdev-redwood/api/src/functions'
web | ℹ 「wds」: Project is running at http://localhost:8910/
web | ℹ 「wds」: webpack output is served from /
web | ℹ 「wds」: Content not from webpack is served from /Users/ajcwebdev/projects/ajcwebdev-redwood/web
web | ℹ 「wds」: 404s will fallback to /index.html
api | Done. Took 1448ms.
Enter fullscreen mode Exit fullscreen mode

Our server is now running on localhost:8910 (to remember just count 8-9-10). Open a browser and enter localhost:8910 into the address bar. If you have done everything correctly up to this point you will see the Redwood starter page.

01-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. Here is the file structure that has been created for us.

├── api
│   ├── db
│   │   ├── schema.prisma
│   │   └── seeds.js
│   └── src
│       ├── functions
│       │   └── graphql.js
│       ├── graphql
│       ├── lib
│       │   └── db.js
│       └── services
└── web
    ├── public
    │   ├── favicon.png
    │   ├── README.md
    │   └── robots.txt
    └── src
        ├── components
        ├── layouts
        ├── pages
        │   ├── FatalErrorPage
        │   │   └── FatalErrorPage.js
        │   └── NotFoundPage
        │       └── NotFoundPage.js
        ├── index.css
        ├── index.html
        ├── index.js
        └── Routes.js
Enter fullscreen mode Exit fullscreen mode

In Redwood, our frontend code is contained in the web folder and our backend code is contained in the api folder. We'll look at the web folder first. Redwood structures the web folder a bit like create-react-app projects with a public and src folder.

1.3 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.

yarn rw g page home /
Enter fullscreen mode Exit fullscreen mode

The generate page command creates a couple of extra files that will be useful later in the series. These include a Storybook file along with testing and mocking files.

✔ Generating page files...
  ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.stories.js`
  ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.test.js`
  ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.js`
✔ Updating routes file...
Enter fullscreen mode Exit fullscreen mode

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.

├── pages
    ├── FatalErrorPage
    │   └── FatalErrorPage.js
    ├── HomePage
    │   │── HomePage.js
    │   │── HomePage.stories.js
    │   └── HomePage.test.js
    └── NotFoundPage
        └── NotFoundPage.js
Enter fullscreen mode Exit fullscreen mode

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

02-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>.

// web/src/pages/HomePage/HomePage.js

import { Link, routes } from '@redwoodjs/router'

const HomePage = () => {
  return (
    <>
      <h1>HomePage</h1>
      <p>
        Find me in <code>./web/src/pages/HomePage/HomePage.js</code>
      </p>
      <p>
        My default route is named <code>home</code>, link to me with `
        <Link to={routes.home()}>Home</Link>`
      </p>
    </>
  )
}

export default HomePage
Enter fullscreen mode Exit fullscreen mode

This should be pretty self-explanatory if you have experience with React. If this doesn't look familiar it would be helpful to spend a little time studying React by itself before jumping into Redwood.

Now we'll edit the page and see what happens.

// web/src/pages/HomePage/HomePage.js

const HomePage = () => {
  return (
    <>
      <h1>ajcwebdev</h1>

      <p>This page is the home!</p>

      <footer>
        <h3>Find me online:</h3>

        <ul>
          <li>
            <a href="https://dev.to/ajcwebdev">Blog</a>
          </li>
          <li>
            <a href="https://twitter.com/ajcwebdev">Twitter</a>
          </li>
          <li>
            <a href="https://github.com/ajcwebdev">GitHub</a>
          </li>
        </ul>
      </footer>
    </>
  )
}

export default HomePage
Enter fullscreen mode Exit fullscreen mode

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

03-HomePage-edit

Now we are going to generate our about page.

yarn rw g page about
Enter fullscreen mode Exit fullscreen mode
$ /Users/ajcwebdev/projects/ajcwebdev-redwood/node_modules/.bin/rw g page about
  ✔ Generating page files...
    ✔ Successfully wrote file `./web/src/pages/AboutPage/AboutPage.stories.js`
    ✔ Successfully wrote file `./web/src/pages/AboutPage/AboutPage.test.js`
    ✔ Successfully wrote file `./web/src/pages/AboutPage/AboutPage.js`
  ✔ Updating routes file...
Enter fullscreen mode Exit fullscreen mode

Like before, this creates an AboutPage component inside of an AboutPage folder along with files for Storybook and testing.

├── pages
    ├── AboutPage
    │   │── AboutPage.js
    │   │── AboutPage.stories.js
    │   └── AboutPage.test.js
    ├── FatalErrorPage
    │   └── FatalErrorPage.js
    ├── HomePage
    │   │── HomePage.js
    │   │── HomePage.stories.js
    │   └── HomePage.test.js
    └── NotFoundPage
        └── NotFoundPage.js
Enter fullscreen mode Exit fullscreen mode

We don't have a link to the about page, but we can enter the route manually into our browser by adding /about after localhost:8910.

04-AboutPage

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

// web/src/pages/AboutPage/AboutPage.js

import { Link, routes } from '@redwoodjs/router'

const AboutPage = () => {
  return (
    <>
      <h1>AboutPage</h1>
      <p>
        Find me in <code>./web/src/pages/AboutPage/AboutPage.js</code>
      </p>
      <p>
        My default route is named <code>about</code>, link to me with `
        <Link to={routes.about()}>About</Link>`
      </p>
    </>
  )
}

export default AboutPage
Enter fullscreen mode Exit fullscreen mode

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

// web/src/pages/AboutPage/AboutPage.js

const AboutPage = () => {
  return (
    <>
      <h1>About</h1>
      <p>This page tells you about stuff!</p>
    </>
  )
}

export default AboutPage
Enter fullscreen mode Exit fullscreen mode

With those changes return to your browser.

05-AboutPage-edit

1.4 yarn redwood --help

If at any point you're having trouble remembering commands you can get a quick reminder of all the commands with the --help command

yarn rw --help
Enter fullscreen mode Exit fullscreen mode

Commands

rw <command>

Command Description
rw build [side..] Build for production
rw check Get experimental structural diagnostics for a Redwood project [diagnostics]
rw console Launch an interactive Redwood shell (experimental) [c]
rw dataMigrate Migrate the data in your database [dm]
rw deploy Deploy your Redwood project
rw destroy Rollback changes made by the generate command [d]
rw dev [side..] Start development servers for api, db, and web
rw generate Save time by generatin [g]
rw info Print your system environment information
rw lint Lint your files
rw open Open your project in your browser
rw prerender Prerender pages of a redwood app (experimental [render]
rw prisma [commands..] Run Prisma CLI with experimental features
rw setup Initialize project config and install packages
rw storybook Launch Storybook: An isolated component development environment [sb]
rw test [side..] Run Jest tests. Defaults to watch mode
rw upgrade Upgrade all @redwoodjs packages via interactive CLI

Options

  • --help - Show help
  • --version - Show version number

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

Discussion (0)

pic
Editor guide