Giter Club home page Giter Club logo

example-blog's Introduction

RedwoodJS Example Blog [Pre 1.0 Release]

⚠️ This is an original example project created for the release of Redwood v0.1. It's in need of some TLC via a re-write. Until that time, we recommend checking out our other example projects.

RedwoodJS Example Blog Screenshot

You can view this app live at:

Note: The Authentication section of this walkthrough uses Netlify Identity, which will only work on Netlify. If you wish to use Vercel, you can simply replace the Netlify Identity provider with another provider supported by Redwood Auth. Or you can start the project from the vercel-deploy branch of this repository.

Table of Contents

Overview

Here is a full-featured blog engine written with RedwoodJS. It includes:

  • Listing all blog posts with first paragraph summaries and pagination (the homepage)
  • Reading a single, full blog post
  • Searching for blog posts by keyword
  • Displaying all posts with a given tag
  • Contact form
  • Fully responsive at various viewport sizes

The admin includes:

  • User authentication
  • Create a new blog post with:
    • Title
    • Slug (URL)
    • Author
    • Body
    • Tags
    • Splash image
  • Edit existing blog post
  • Delete a blog post
  • Mark a new post as a Draft and not display it live
  • Publish a post live
  • Unpublish a post (puts it back to DRAFT status)

On the tech side:

Getting Started

Installation

Clone the repo:

git clone https://github.com/redwoodjs/example-blog.git
cd example-blog

Install dependencies:

yarn install

Create a local SQLite database and seed it with a few blog posts:

yarn redwood prisma migrate dev
yarn redwood prisma db seed

Now you should be able to start a development server:

yarn redwood dev

Assuming everything worked, open a browser to http://localhost:8910 and you should be seeing the homepage (similar to the screenshot above).

Deployment

See the section on Deployment in the Redwood Tutorial.

Enabling Authentication

We're working on supporting the netlify dev command properly with Redwood, which is required to use Netlify Identity in a local dev environment. The following instructions will not work until this fix is complete.

Copy the .env.defaults file to a new file .env and edit it, setting the USE_AUTHENTICATION variable to true.

Enabling Identity on Netlify

You'll need to create a new site on Netlify so that you can enable Identity and give the Identity API Endpoint to your development instance of the blog.

If you don't have it already, install the Netlify CLI tools:

yarn global add netlify-cli

Log in with your Netlify credentials:

netlify login

Create a new site:

netlify init --manual

Now you have two paths:

  1. Find and link to the existing site you have deployed
  2. Choose Create & configure a new site, choose which team to associate this new site with (if you have more than one). You can enter a Site name or just hit ENTER to get a random one. You can enter n when asked if you want to continue.

Go to netlify.com and find your site. Click on the Identity link and the Enable Identity button:

Netlify Screenshot

Now copy and paste the API endpoint URL that's displayed once the screen refreshes:

Netlify Identity URL

Back to your local development machine, head to http://localhost:8910/admin and you'll be prompted with the login popup. Enter the URL that you just copied and click Set site's URL:

The popup should refresh and now you'll see a login box. But, we don't have any users yet. Back over to Netlify, click the Invite users button and send yourself an invite:

image

You'll get an email with a link to accept the invite. However, this link won't work: it's trying to go to the Netlify URL, which doesn't have a site on it yet. So after clicking the link and getting an error, change the URL to be http://localhost:8910 but make sure to keep the invite token at the end. For example, if you are sent to

https://nostalgic-dijkstra-23eaba.netlify.com/#invite_token=8-TFgNesyzhIn8LnXv3

Rewrite that URL to:

http://localhost:8910/#invite_token=8-TFgNesyzhIn8LnXv3

You should see the login popup with a password input to complete your account. Fill it in and submit and now you should get a message saying you are logged in. Head back to the admin http://localhost:8910/admin and you should have access (finally!)

Enabling Image Uploads

The blog uses an external service, Filestack to handle image uploads. If you want to be able to upload images in local development you'll need to create a free account at Filestack and copy the API key. You get 100 uploads per month on their free account which should be plenty to test with.

Once you have logged into Filestack copy the API key shown at the top right of the dashboard:

Filestack screenshot

If you haven't already, copy the .env.example file in the root of the blog to a new file named .env. Edit the FILESTACK_API_KEY variable to be equal to the one you just copied. Save .env and restart your yarn dev process. Now when creating a new blog post http://localhost:8910/admin/new you should see a filepicker towards the bottom of the form:

New post screenshot

TODO

  • Remove file picker if ENV var not set, with instructions for enabling
  • Add instructions for enabling Authentication
  • In public view don't include posts in Draft state

example-blog's People

Contributors

cannikin avatar codejet avatar dac09 avatar dependabot[bot] avatar dthyresson avatar markpollmann avatar mojombo avatar nikolasburk avatar peterp avatar thedavidprice avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

example-blog's Issues

localhost:8910 says `Something went wrong.` after "successful" install

Node v12.14.1
macOS 10.15.3
yarn 1.21.1

http://localhost:8910/ says Something went wrong.

Here is the output from my Firefox Developer 74.0b5 (64-bit) browser:

[HMR] Waiting for update signal from WDS... app.chunk.js:65064:12
Download the React DevTools for a better development experience: https://fb.me/react-devtools app.chunk.js:50662:17
SyntaxError: invalid regexp group app.chunk.js:2753:196
The above error occurred in the <RouterImpl> component:
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    in FatalErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, FatalErrorBoundary. app.chunk.js:45194:13
[WDS] Hot Module Replacement enabled. app.chunk.js:64153:9
[WDS] Live Reloading enabled. app.chunk.js:64157:9
[WDS] Disconnected! app.chunk.js:64277:9
Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: http://localhost:8910/static/js/app.chunk.js
Source Map URL: app.chunk.js.map

I did the setup of the project a few minutes ago with:

git clone https://github.com/redwoodjs/example-blog.git redwood-example-blog
cd redwood-example-blog
And following instructions from Instructions from https://github.com/redwoodjs/example-blog/#installation

See full output of my install here prisma/prisma#1819 (comment)

Regularly getting "Something went wrong." after clicking through multiple pages

2020-03-13 13 49 24

I wish I could provide more specific reproduction steps. I'm running Safari 13.0.5 (15608.5.11) on latest macOS Catalina (10.15.3).

Steps to reproduce on my end:

  1. Freshly clone repo
  2. yarn install
  3. yarn redwood db up and yarn redwood db seed
  4. yarn redwood dev
  5. Open localhost:8910 on latest Safari, click on a blog post, then click on a tag in the blog post.

Usually, this causes the bug. I am almost always able to load any of the pages if I directly go to the URL, but after clicking on a couple links I almost always get this error. (maybe a router issue?)

[Error] Error: GraphQL error: 
�[31mInvalid �[1m`prisma.posts.findOne()`�[22m invocation in�[39m
�[31m�[4m/Users/zrl/dev/tmp/example-blog/api/src/services/posts/posts.js:70:30�[24m�[39m

{
  where: {
�[2m�[32m�[2m?   slug?: String,�[22m�[2m�[39m�[22m
�[2m�[32m�[39m�[22m�[2m�[32m�[2m?   id?: Int�[22m�[2m�[39m�[22m
�[2m�[32m�[39m�[22m  }�[2m,�[22m
�[2m�[22m  include: {
    tags: �[2mtrue�[22m�[2m�[22m
�[2m�[22m  }�[2m�[22m
�[2m�[22m}

Argument �[1mwhere�[22m of type �[1mPostWhereUniqueInput�[22m needs �[92mat least one�[39m argument. Available args are listed in �[2m�[32mgreen�[39m�[22m.

�[2mNote: Lines with �[32m?�[39m are optional�[22m�[2m.�[22m
ApolloError — bundle.esm.js:63
(anonymous function) — bundle.esm.js:159
(anonymous function) — react-hooks.esm.js:265
(anonymous function) — react-hooks.esm.js:73
useDeepMemo — react-hooks.esm.js:354
useBaseQuery — react-hooks.esm.js:380
Query — react-components.esm.js:8
renderWithHooks — react-dom.development.js:14825
updateFunctionComponent — react-dom.development.js:17058
beginWork$1 — react-dom.development.js:23210
performUnitOfWork — react-dom.development.js:22188
workLoopSync — react-dom.development.js:22161
performSyncWorkOnRoot — react-dom.development.js:21787
performSyncWorkOnRoot
(anonymous function) — react-dom.development.js:11111
unstable_runWithPriority — scheduler.development.js:653
flushSyncCallbackQueueImpl — react-dom.development.js:11106
flushSyncCallbackQueue — react-dom.development.js:11094
scheduleUpdateOnFiber — react-dom.development.js:21230
dispatchAction — react-dom.development.js:15682
dispatchAction
error — react-hooks.esm.js:242
notifySubscription — Observable.js:140
onNotify — Observable.js:179
error — Observable.js:240
forEach
iterateObserversSafely — bundle.esm.js:435
onError — bundle.esm.js:386
invoke — bundle.esm.js:1209
(anonymous function) — bundle.esm.js:1559
forEach
(anonymous function) — bundle.esm.js:1557
forEach
(anonymous function) — bundle.esm.js:1555
(anonymous function) — bundle.esm.js:1646
next — Observable.js:322
notifySubscription — Observable.js:135
onNotify — Observable.js:179
next — Observable.js:235
forEach
next — bundle.esm.js:866
notifySubscription — Observable.js:135
onNotify — Observable.js:179
next — Observable.js:235
next — bundle.esm.js:29
notifySubscription — Observable.js:135
onNotify — Observable.js:179
next — Observable.js:235
(anonymous function) — bundle.esm.js:76
promiseReactionJob

	(anonymous function) (app.chunk.js:3508)
	renderWithHooks (app.chunk.js:40459)
	updateFunctionComponent (app.chunk.js:42692)
	beginWork$1 (app.chunk.js:48844)
	performUnitOfWork (app.chunk.js:47822)
	workLoopSync (app.chunk.js:47795)
	performSyncWorkOnRoot (app.chunk.js:47421)
	performSyncWorkOnRoot
	(anonymous function) (app.chunk.js:36745)
	unstable_runWithPriority (app.chunk.js:56440)
	flushSyncCallbackQueueImpl (app.chunk.js:36740)
	flushSyncCallbackQueue (app.chunk.js:36728)
	scheduleUpdateOnFiber (app.chunk.js:46864)
	dispatchAction (app.chunk.js:41316)
	dispatchAction
	error (app.chunk.js:502)
	notifySubscription (app.chunk.js:65286)
	onNotify (app.chunk.js:65325)
	error (app.chunk.js:65386)
	forEach
	iterateObserversSafely (app.chunk.js:6026)
	onError (app.chunk.js:5977)
	invoke (app.chunk.js:6798)
	(anonymous function) (app.chunk.js:7148)
	forEach
	(anonymous function) (app.chunk.js:7146)
	forEach
	(anonymous function) (app.chunk.js:7144)
	(anonymous function) (app.chunk.js:7235)
	next (app.chunk.js:65468)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	forEach
	next (app.chunk.js:6455)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	next (app.chunk.js:7743)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	(anonymous function) (app.chunk.js:8042)
	promiseReactionJob
[Error] Error: GraphQL error: 
�[31mInvalid �[1m`prisma.posts.findOne()`�[22m invocation in�[39m
�[31m�[4m/Users/zrl/dev/tmp/example-blog/api/src/services/posts/posts.js:70:30�[24m�[39m

{
  where: {
�[2m�[32m�[2m?   slug?: String,�[22m�[2m�[39m�[22m
�[2m�[32m�[39m�[22m�[2m�[32m�[2m?   id?: Int�[22m�[2m�[39m�[22m
�[2m�[32m�[39m�[22m  }�[2m,�[22m
�[2m�[22m  include: {
    tags: �[2mtrue�[22m�[2m�[22m
�[2m�[22m  }�[2m�[22m
�[2m�[22m}

Argument �[1mwhere�[22m of type �[1mPostWhereUniqueInput�[22m needs �[92mat least one�[39m argument. Available args are listed in �[2m�[32mgreen�[39m�[22m.

�[2mNote: Lines with �[32m?�[39m are optional�[22m�[2m.�[22m

	(anonymous function) (app.chunk.js:3508)
	renderWithHooks (app.chunk.js:40459)
	updateFunctionComponent (app.chunk.js:42692)
	callCallback (app.chunk.js:25822)
	dispatchEvent
	invokeGuardedCallbackDev (app.chunk.js:25871)
	invokeGuardedCallback (app.chunk.js:25926)
	beginWork$1 (app.chunk.js:48868)
	performUnitOfWork (app.chunk.js:47822)
	workLoopSync (app.chunk.js:47795)
	performSyncWorkOnRoot (app.chunk.js:47421)
	performSyncWorkOnRoot
	(anonymous function) (app.chunk.js:36745)
	unstable_runWithPriority (app.chunk.js:56440)
	flushSyncCallbackQueueImpl (app.chunk.js:36740)
	flushSyncCallbackQueue (app.chunk.js:36728)
	scheduleUpdateOnFiber (app.chunk.js:46864)
	dispatchAction (app.chunk.js:41316)
	dispatchAction
	error (app.chunk.js:502)
	notifySubscription (app.chunk.js:65286)
	onNotify (app.chunk.js:65325)
	error (app.chunk.js:65386)
	forEach
	iterateObserversSafely (app.chunk.js:6026)
	onError (app.chunk.js:5977)
	invoke (app.chunk.js:6798)
	(anonymous function) (app.chunk.js:7148)
	forEach
	(anonymous function) (app.chunk.js:7146)
	forEach
	(anonymous function) (app.chunk.js:7144)
	(anonymous function) (app.chunk.js:7235)
	next (app.chunk.js:65468)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	forEach
	next (app.chunk.js:6455)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	next (app.chunk.js:7743)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	(anonymous function) (app.chunk.js:8042)
	promiseReactionJob
[Error] Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
	reconcileChildFibers (app.chunk.js:40004:220)
	reconcileChildren (app.chunk.js:42427)
	updateFunctionComponent (app.chunk.js:42711)
	callCallback (app.chunk.js:25822)
	dispatchEvent
	invokeGuardedCallbackDev (app.chunk.js:25871)
	invokeGuardedCallback (app.chunk.js:25926)
	beginWork$1 (app.chunk.js:48868)
	performUnitOfWork (app.chunk.js:47822)
	workLoopSync (app.chunk.js:47795)
	performSyncWorkOnRoot (app.chunk.js:47421)
	performSyncWorkOnRoot
	(anonymous function) (app.chunk.js:36745)
	unstable_runWithPriority (app.chunk.js:56440)
	flushSyncCallbackQueueImpl (app.chunk.js:36740)
	flushSyncCallbackQueue (app.chunk.js:36728)
	scheduleUpdateOnFiber (app.chunk.js:46864)
	dispatchAction (app.chunk.js:41316)
	dispatchAction
	error (app.chunk.js:502)
	notifySubscription (app.chunk.js:65286)
	onNotify (app.chunk.js:65325)
	error (app.chunk.js:65386)
	forEach
	iterateObserversSafely (app.chunk.js:6026)
	onError (app.chunk.js:5977)
	invoke (app.chunk.js:6798)
	(anonymous function) (app.chunk.js:7148)
	forEach
	(anonymous function) (app.chunk.js:7146)
	forEach
	(anonymous function) (app.chunk.js:7144)
	(anonymous function) (app.chunk.js:7235)
	next (app.chunk.js:65468)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	forEach
	next (app.chunk.js:6455)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	next (app.chunk.js:7743)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	(anonymous function) (app.chunk.js:8042)
	promiseReactionJob
[Error] The above error occurred in the <Query> component:
    in Query
    in Unknown (created by PostPage)
    in section (created by BlogLayout)
    in main (created by BlogLayout)
    in div (created by BlogLayout)
    in div (created by BlogLayout)
    in BlogLayout (created by PostPage)
    in PostPage (created by PageLoader)
    in PageLoader (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    in FatalErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, FatalErrorBoundary.
	logCapturedError (app.chunk.js:45194)
	logError (app.chunk.js:45231)
	(anonymous function) (app.chunk.js:46390)
	getStateFromUpdate (app.chunk.js:37949)
	processUpdateQueue (app.chunk.js:38080)
	updateClassInstance (app.chunk.js:38841)
	updateClassComponent (app.chunk.js:42765)
	beginWork$1 (app.chunk.js:48844)
	performUnitOfWork (app.chunk.js:47822)
	workLoopSync (app.chunk.js:47795)
	performSyncWorkOnRoot (app.chunk.js:47421)
	performSyncWorkOnRoot
	(anonymous function) (app.chunk.js:36745)
	unstable_runWithPriority (app.chunk.js:56440)
	flushSyncCallbackQueueImpl (app.chunk.js:36740)
	flushSyncCallbackQueue (app.chunk.js:36728)
	scheduleUpdateOnFiber (app.chunk.js:46864)
	dispatchAction (app.chunk.js:41316)
	dispatchAction
	error (app.chunk.js:502)
	notifySubscription (app.chunk.js:65286)
	onNotify (app.chunk.js:65325)
	error (app.chunk.js:65386)
	forEach
	iterateObserversSafely (app.chunk.js:6026)
	onError (app.chunk.js:5977)
	invoke (app.chunk.js:6798)
	(anonymous function) (app.chunk.js:7148)
	forEach
	(anonymous function) (app.chunk.js:7146)
	forEach
	(anonymous function) (app.chunk.js:7144)
	(anonymous function) (app.chunk.js:7235)
	next (app.chunk.js:65468)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	forEach
	next (app.chunk.js:6455)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	next (app.chunk.js:7743)
	notifySubscription (app.chunk.js:65281)
	onNotify (app.chunk.js:65325)
	next (app.chunk.js:65381)
	(anonymous function) (app.chunk.js:8042)
	promiseReactionJob
[Error] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in PageLoader (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
	printWarning (app.chunk.js:25722)
	error (app.chunk.js:25694)
	warnAboutUpdateOnUnmountedFiberInDEV (app.chunk.js:48826)
	scheduleUpdateOnFiber (app.chunk.js:46834)
	enqueueSetState (app.chunk.js:38295)
	(anonymous function) (app.chunk.js:53216)
	_callee$ (app.chunk.js:2336)
	tryCatch (app.chunk.js:54730)
	invoke (app.chunk.js:54959)
	asyncGeneratorStep (app.chunk.js:1325)
	_next (app.chunk.js:1347)
	promiseReactionJob

[Questtion] Missing netlify deploy step?

Hey I spent a fair amount of time trying to figure out why I was hitting a CORS error when pasting the netlify URL. Turns out you have to deploy the netlify app first e.g. netlify deploy --prod Not sure if this is worth adding or just me.

image

Okay I see this section maybe make it explicit you need to deploy the app first before you can add identity?

Leave a message about security in the README

Hi there!

There's a part in the README about enabling authentication, but I noticed there is actually no backend checks for auth in place!

I understand that this is an example, but maybe it's a good idea to leave a note for inexperienced coders. Like you said in the tutorial: never trust the client!

I'd be happy to make a PR if you agree!

Cheers

yarn db:up (cascading) error with Node v12.14.0 and npm v6.13.4

From a fresh clone, ran yarn install, cd api, and yarn db:up.

1) Initial Error Running from Fresh Clone
Encountered this error: prisma/prisma#1162 Suggestion was to upgrade to Prisma2 preview 17+, which I did.

2) Error with api/prisma/schema.prisma config
Upon update to Prisma2 preview017.1, I encountered an error with api/prisma/schema.prisma using env() in provider arg. Updated to provider = "sqlite".

See doc:
https://github.com/prisma/prisma2/blob/7f8b064e28402740aa29481fbc3aff6a8ef36b25/docs/prisma-schema-file.md#using-environment-variables

It is not possible to use environment variables for the provider argument in datasource and generator definitions

note: I later came back and ran using Prisma preview018.2 and can confirm it works.

3) Breaking change updating to Prisma2 preview016+
See: https://github.com/prisma/prisma2/releases/tag/2.0.0-preview016

Due to a major refactoring in Lift's migration engine, your migrations are likely going to break if you upgrade to preview016 with an error similar to this: Error parsing the migration steps: Error("unknown field 'name', expected 'model'", line: 1, column: 59).
To get rid of this error, you'll need to manually delete the generated migrations folder from your file system and drop the _Migration table in your database.

I removed dev.db and migrations/

4) binaryTarget error in schema.prisma
Lastly, I ran into this error:

Error: Binary target linux-glibc-libssl1.0.2 doesn't exist anymore. Please use debian-openssl-1.0.x instead.

Updated schema.prisma binaryTargets = ["darwin", "debian-openssl-1.0.x"]

🎉 Success!
Confirm now working using the following:

  • Node v12.14.0
  • npm v6.13.4
  • yarn v1.21.1
  • prisma2 v2.0.0-preview018.2

Two small potential fixes

  1. Since the images load so quickly, it might be an idea to put an image box width, to expand the box before the image loads, so the content in the article isn't immediately displaced on load.

  2. When scrolling down on the main page and clicking an article, it will put you into the middle of the loaded article. It might give a better impression if the scroll position is reset back to the top when clicking into an article.

I know this is minor details, and probably not top priority. But I thought I might mention it while it came to mind, when re-viewing the example page. It would give a slightly better impression of the example page, which (like it or not) many people will judge Redwood's merits by. (I see you fixed the flickering page issue, that's really nice, and was the main issue previously.)

Failed to compile. ./src/Routes.js Module not found: Error: Can't resolve 'srcpagesAboutPage' in 'C:\Users\Jan\Documents\throwaway\example-blog\web\src'

I follow: https://github.com/redwoodjs/example-blog#installation

When the browser opens, I get this:

Failed to compile.

./src/Routes.js
Module not found: Error: Can't resolve 'srcpagesAboutPage' in 'C:\Users\Jan\Documents\throwaway\example-blog\web\src'

image

I am on Windows 10, thing that might be relevant because of the srcpagesAboutPage. Looks to me it might be using wrong directory separator that is getting removed somewhere.

Add the latest and greatest Redwood features

The example blog was built to get us to v0.1.0. We've added a bunch of features since then. Let's bring some of that stuff into the blog:

  • comments
  • stories
  • tests
  • prerender
  • dbAuth
  • directives

Anything else?

Consider alternative to moment

I'm not sure if you care about this since choice of date library is moment independent of demonstrating Redwood, but including moment really bloats the bundle size. moment is only used to call fromNow.

Two better alternatives:

  • The browser has this functionality built in with Intl.RelativeTimeFormat. For Safari and IE support you would need a polyfill.
  • Use date-fns formatDistanceToNow. With date-fns, you can import just this one single function and not the whole library

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.