Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

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

Posted on • Edited on

     

a first look at redwoodJS part 1 - setup, pages

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.37.2)

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 withcreate-react-app

If none of that made sense you should click the link to thecreate-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 needyarn for this tutorial which has slight differences fromnpm. You can find installation instructionshere or just enternpm install -g yarn.

1.1yarn 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 useajcwebdev-redwood in a terminal command.

yarn create redwood-app ajcwebdev-redwood
Enter fullscreen modeExit fullscreen mode

Output:

success Installed "create-redwood-app@0.37.2" with binaries:      - create-redwood-app  ✔ Creating Redwood app    ✔ Checking node and yarn compatibility    ✔ Creating directory '/Users/ajcwebdev/ajcwebdev-redwood'  ✔ Installing packages    ✔ Running 'yarn install'... (This could take a while)  ✔ Convert TypeScript files to JavaScript  ✔ Generating typesThanks for trying out Redwood!
Enter fullscreen modeExit fullscreen mode

This creates a folder calledajcwebdev-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 asyarn redwood and can be used to save a few keystrokes. Before entering the next commands create an empty repository onGitHub. All the code for this series can be foundon my GitHub.

Initialize git repo

Enter your new project directory and change the GitHub URL in the last command to the repo you just created in the previous step.

cdajcwebdev-redwoodgit initgit add.git commit-m"Nailed it"git branch-M maingit remote add origin https://github.com/YOUR_USERNAME_HERE/YOUR_PROJECT_HERE.git
Enter fullscreen modeExit fullscreen mode

Push to main

git push-u origin main
Enter fullscreen modeExit fullscreen mode

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

Dominic Saadi after pushing to main

1.2yarn redwood dev

Start the development server

yarn rw dev
Enter fullscreen modeExit fullscreen mode
✔ Generating the Prisma client...api | [nodemon] 2.0.12api | [nodemon] to restart at any time, enter `rs`api | [nodemon] watching path(s): redwood.tomlapi | [nodemon] watching extensions: js,mjs,jsonapi | [nodemon] starting `yarn rw-api-server-watch`gen | Generating TypeScript definitions and GraphQL schemas...gen | 10 files generatedapi | Building... Took 625 msapi | Starting API Server... Took 5 msapi | Listening on http://localhost:8911/api | Importing Server Functions... api | /graphql 1374 msapi | ... Imported in 1374 msweb | assets by path static/js/*.js 2.55 MiBweb |   asset static/js/app.bundle.js 2.5 MiB [emitted] (name: app) 1 related assetweb |   asset static/js/runtime-app.bundle.js 48.8 KiB [emitted] (name: runtime-app) 1 related assetweb |   asset static/js/src_pages_NotFoundPage_NotFoundPage_js.chunk.js 3.37 KiB [emitted] 1 related assetweb | asset README.md 1.9 KiB [emitted] [from: public/README.md] [copied]web | asset favicon.png 1.83 KiB [emitted] [from: public/favicon.png] [copied]web | asset index.html 483 bytes [emitted]web | asset robots.txt 24 bytes [emitted] [from: public/robots.txt] [copied]web | Entrypoint app 2.55 MiB (2.56 MiB) = static/js/runtime-app.bundle.js 48.8 KiB static/js/app.bundle.js 2.5 MiB 2 auxiliary assetsweb | orphan modules 432 KiB [orphan] 115 modulesweb | runtime modules 32.7 KiB 17 modulesweb | modules by path ../node_modules/ 2.08 MiB 532 modulesweb | modules by path ./src/ 10.8 KiBweb |   modules by path ./src/*.js 3.46 KiBweb |     ./src/App.js 1.59 KiB [built] [code generated]web |     ./src/Routes.js 1.88 KiB [built] [code generated]web |   modules by path ./src/pages/ 5.18 KiBweb |     ./src/pages/FatalErrorPage/FatalErrorPage.js 2.81 KiB [built] [code generated]web |     ./src/pages/NotFoundPage/NotFoundPage.js 2.37 KiB [built] [code generated]web |   modules by path ./src/*.css 2.19 KiBweb |     ./src/index.css 1.89 KiB [built] [code generated]web |     ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].oneOf[4].use[1]!./src/index.css 305 bytes [built] [code generated]web | webpack 5.51.1 compiled successfully in 4921 ms
Enter fullscreen modeExit fullscreen mode

Our server is now running onlocalhost:8910 (to remember just count 8-9-10). Open a browser and enterlocalhost: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│   │   │   ├── auth.js│   │   │   ├── db.js│   │   │   └── logger.js│   │   └── services│   └── package.json│├── web│   ├── public│   │   ├── favicon.png│   │   ├── README.md│   │   └── robots.txt│   ├── src│   │   ├── components│   │   ├── layouts│   │   ├── pages│   │   │   ├── FatalErrorPage│   │   │   │   └── FatalErrorPage.js│   │   │   └── NotFoundPage│   │   │       └── NotFoundPage.js│   │   ├── App.js│   │   ├── index.css│   │   ├── index.html│   │   └── Routes.js│   └── package.json│├── .env├── .env.defaults├── .env.example├── .gitignore├── README.md├── package.json├── redwood.toml└── yarn.lock
Enter fullscreen modeExit fullscreen mode

In Redwood, our frontend code is contained in theweb folder and our backend code is contained in theapi folder. We'll look at theweb folder first. Redwood structures theweb folder a bit likecreate-react-app projects with apublic andsrc folder.

1.3redwood generate page

With our application now set up we can start creating pages with thegenerate page command

Generate home page

Thegenerate page command accepts two arguments for setting the name of the page and its path.

yarn rw g page home /
Enter fullscreen modeExit fullscreen mode

Theg page home / command creates a home page and a folder to hold that page. It also 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 modeExit fullscreen mode

Since I only enteredhome 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 modeExit fullscreen mode

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

02-HomePage-on-localhost-8910

Let's look at the code that was generated for this page. It's a component calledHomePage that returns a<div> with a header<h1> and a paragraph tag<p>. TheMetaTags component can be used to set relevant SEO tags such astitle,description, andog:image.

// web/src/pages/HomePage/HomePage.jsimport{Link,routes}from'@redwoodjs/router'import{MetaTags}from'@redwoodjs/web'constHomePage=()=>{return(<><MetaTagstitle="Home"// description="Home description"/* you should un-comment description and add a unique description, 155 characters or less      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets *//><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 `<Linkto={routes.home()}>Home</Link>`</p></>)}exportdefaultHomePage
Enter fullscreen modeExit 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.jsimport{MetaTags}from'@redwoodjs/web'constHomePage=()=>{return(<><MetaTagstitle="Home"description="The home page of the website"/><h1>ajcwebdev</h1><p>This page is the home!</p><footer><h3>Find me online:</h3><ul><li><ahref="https://dev.to/ajcwebdev">Blog</a></li><li><ahref="https://twitter.com/ajcwebdev">Twitter</a></li><li><ahref="https://github.com/ajcwebdev">GitHub</a></li></ul></footer></>)}exportdefaultHomePage
Enter fullscreen modeExit fullscreen mode

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

03-HomePage-on-localhost-8910-edited

Generate about page

Now we are going to generate ourabout page.

yarn rw g page about
Enter fullscreen modeExit fullscreen mode
✔ 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 modeExit fullscreen mode

Like before, this creates anAboutPage component inside of anAboutPage 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 modeExit 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 afterlocalhost:8910.

04-AboutPage-on-localhost-8910

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.jsimport{Link,routes}from'@redwoodjs/router'import{MetaTags}from'@redwoodjs/web'constAboutPage=()=>{return(<><MetaTagstitle="About"// description="About description"/* you should un-comment description and add a unique description, 155 characters or less      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets *//><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 `<Linkto={routes.about()}>About</Link>`</p></>)}exportdefaultAboutPage
Enter fullscreen modeExit fullscreen mode

We can also edit this page just like thehome page.

// web/src/pages/AboutPage/AboutPage.jsimport{MetaTags}from'@redwoodjs/web'constAboutPage=()=>{return(<><MetaTagstitle="About"description="The page that tells you about stuff"/><h1>About</h1><p>This page tells you about stuff!</p></>)}exportdefaultAboutPage
Enter fullscreen modeExit fullscreen mode

With those changes return to your browser.

05-AboutPage-on-localhost-8910-edited

1.4yarn 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 modeExit fullscreen mode
CommandDescriptionAlias
rw build [side..]Build for production
rw checkStructural diagnostics for a Redwood project (experimental)diagnostics
rw consoleLaunch an interactive Redwood shell (experimental)c
rw data-migrateMigrate the data in your databasedm,dataMigrate
rw deployDeploy your Redwood project
rw destroyRollback changes made by the generate commandd
rw dev [side..]Start development servers for api, db, and web
rw execRun scripts generated with yarn generate script
rw generateGenerate boilerplate code and type definitionsg
rw infoPrint your system environment information
rw lintLint your files
rw openOpen your project in your browser
rw prerenderPrerender pages of your Redwood app at build timerender
rw prisma [commands..]Run Prisma CLI with experimental features
rw serve [side]Run server for api or web in production
rw setupInitialize project config and install packages
rw storybookLaunch Storybook: An isolated component development environmentsb
rw test [filter..]Run Jest tests. Defaults to watch mode
rw ts-to-jsConvert a TypeScript project to JavaScript
rw type-check [sides..]Run a TypeScript compiler check on your projecttsc,tc
rw upgradeUpgrade all @redwoodjs packages via interactive CLI

Options

  • --help - Show help
  • --version - Show version number
  • --cwd - Working directory to use (whereredwood.toml is located)

1.5redwood.toml

redwood.toml contains the configuration settings for your Redwood app and is what makes your Redwood app a Redwood app. If you remove it and try to runyarn rw dev, you'll get an error. You can see the full list of options on theApp Configuration doc.

[web]title="Redwood App"port=8910apiProxyPath="/.redwood/functions"includeEnvironmentVariables=[][api]port=8911
Enter fullscreen modeExit fullscreen mode

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

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
adriatic profile image
Nikolaj Ivancic
See https://www.linkedin.com/in/nikolaj-ivancic-6ab948a8/ and note that I am only involved in Open Source projects.
  • Location
    Ann Arbor, Michigan
  • Joined

A quick note: the link to "my Github" (see below) is bad.

Before entering the next commands create an empty repository on GitHub. All the code for this series can be found on my GitHub.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Web developer, writer, speaker, and advocate.
  • Location
    internet
  • Work
    Developer Advocate
  • Joined

More fromajcwebdev

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp