redwoodjs / example-blog Goto Github PK

View Code? Open in Web Editor NEW

103.0 103.0 35.0 16.17 MB

Example Blog app written with Redwood

Home Page: redwoodjs-example-blog.vercel.app

License: MIT License

JavaScript 98.67% CSS 0.65% HTML 0.68%

example-blog's People

Stargazers

Watchers

example-blog's Issues

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

Default provider and url don't work out of the box

In order to follow the instructions without having to change a file, the default datasource provider should be changed to sqlite.

Two small potential fixes

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

Could create an example that has authentication and authorization?

Could create an example that has authentication and authorization?
Not use Auth0.

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'

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?

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

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

How to add PWA and SSR in this example?

How to add PWA and SSR in this example?
Could add these two features into it?

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

Update Prisma2 preview024

See redwoodjs/redwood#279

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

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:

Freshly clone repo
yarn install
yarn redwood db up and yarn redwood db seed
yarn redwood dev
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

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)

Deploy and add link in README

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

Create a non-auth branch for Vercel

Update for redwood 0.1.0 release

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.