clintonwoo / hackernews-react-graphql Goto Github PK
View Code? Open in Web Editor NEWHacker News clone rewritten with universal JavaScript, using React and GraphQL.
License: MIT License
Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
License: MIT License
I would suggest to remove inline styling. It would make the code much more cleaner.
I have run this command = npm run build && npm start
But some how npm run build command not working for me.
Node version : v8.11.4
Npm version : 5.6.0
Freeze :
Compiled successfully.
┌ /
├ /_app
├ /_document
├ /_error
├ /active
├ /ask
├ /best
├ /bestcomments
├ /bookmarklet
├ /changepw
├ /dmca
├ /favorites
├ /forgot
├ /formatdoc
├ /front
├ /hidden
├ /item
├ /jobs
├ /leaders
├ /lists
├ /login
├ /newcomments
├ /newest
├ /newpoll
├ /newsfaq
├ /newsguidelines
├ /newswelcome
├ /noobcomments
├ /noobstories
├ /reply
├ /security
├ /show
├ /showhn
├ /shownew
├ /submit
├ /submitted
├ /threads
├ /upvoted
└ /user
I run npm start
then the project runs, what should I do next to get data from HN? I need to apply for API keys?
Thx!
when I follow the this documentation
( https://www.howtographql.com/react-apollo/1-getting-started/ )
I realise that here to wrong mention
because after the yarn start it gives to some error
and after the realise that,
I check it out and I find that`s wrong mention
should we give to black background color here
look like that --> import logo from './../logo.svg';
--> import './../styles/App.css';
It would be great to have this project as video series or as step by step tutorial where you learn bit by bit and have a functional product in the end.
after I npm install,all package is installed successfully now
and then npm run dev
,localhost:3000 in browser,but the page alway loading.chrome show 'ERR_EMPTY_RESPONSE'
here is the command line log
$ npm run dev
> [email protected] dev C:\My\work\React\hackernews-react-graphql
> babel-node src/server.js
> Using external babel configuration
> Location: "C:\My\work\React\hackernews-react-graphql\.babelrc"
DONE Compiled successfully in 2071ms18:25:15
> App ready on http://localhost:3000
> GraphQL Ready on http://localhost:3000/graphql
Dev: true
> Building page: /
DONE Compiled successfully in 2359ms18:25:20
Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
in input
in form
in center
in td
in tr
in Footer
in tbody
in table
in center
in Main
in Query
in Apollo(Main)
in Unknown
in ApolloProvider
in RenderPromisesProvider
WAIT Compiling...18:25:21
DONE Compiled successfully in 105ms18:25:22
why?thank you!
Hi!
Thanks for your work here. Any advice on the best way I can construct my own backend to make a company-internal version of this for myself? Right now this clone seems really to clone the front end, but I'm not sure how to "swap out" the HN API that it is currently using. Any advice / guidance is very appreciated!
Expected?
can't run dev for various reasons
Thanks so much for providing this. It's very interesting to see these technologies used together
One thing I noticed is that it looks like there is no database and perhaps data is just stored in memory. I was wondering what your thoughts were on adding a database like Postgres and using a data access layer like Prisma? It would also be interesting to see an example of that. Potentially I could add it if it's something you're open to, but no promises since I'm not sure yet whether I would have the time
i have checked the package.json but i am unable to dev script in it
Any plan to support react 16 and next 4?
I wanted to say congrats for the nice project! 💪
I was thinking it would be nice to have a rendered UI as close as possible as the original one :)
Some time ago I started a css/html clone of the Hacker News UI just for fun, I was trying to reproduce the same pixel perfect result on the browser but with better markup (bleah those tables 🐙 ) and with flexbox :)
Do you think you can improve it?
Or either, would you accept a PR with some code introducing a 1:1 result but with better markup?
Hi, just wanted to see what the community's interest would be in seeing this project rebuilt in TypeScript. Obviously this would come with a number of benefits including strong types, better static code analysis and clearer APIs. This would lead to higher developer productivity.
If enough people are interested I can go ahead and do it.
I would suggest to make presentational components functional instead of class based. Functional components are not “dressed up” with any of the capabilities of React component objects and hence there may be performance advantages.
You should consider adding this to HNPWA for additional exposure :), seems this would be the first implementation using GraphQL over there.
Sorry,
I feel bad asking that very simple question : how to change the default 3000 port ?
the npm start --port 8080 doesn't seems to do the trick :(
Currently, filename for spec of CommentService is comment-model.spec.ts. The correct must be comment-service.spec.ts
Is there a reason this project is using both npm and yarn? I think one or the other could be used exclusively (along with its respective lockfile).
If the reason is ¯_(ツ)_/¯ I'd be happy to submit a PR consolidating to one or the other!
EDIT: Apologies for not explaining where I got the assumptions that both were being used.
package.json
use npm
package.json
use yarn
Getting a 404 error when going to www.hnclone.win
Thanks so much for providing this! It's helpful in learning these technologies
One question I had when looking at the code is that there seem to be different places to put the tests. Sometimes they're in a __tests__
directory and sometimes they aren't. For example:
Is this intended? If so, what goes where?
Your clone doesn't seem to render the comment classes correctly. For example on the real site a comment with .c72 will be rendered on your site as .c00.
Bash output is below. I do have Yarn installed.
Seans-MacBook-Pro:Examples seanlanghi$ git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install
Cloning into 'hackernews-react-graphql'...
remote: Enumerating objects: 1141, done.
remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141
Receiving objects: 100% (1141/1141), 5.05 MiB | 14.31 MiB/s, done.
Resolving deltas: 100% (789/789), done.
npm WARN deprecated @zeit/[email protected]: Please use `update-check` instead.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: This version is no longer maintained. Please upgrade to the latest version.
> [email protected] install /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/fsevents
> node install
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.4/fse-v1.2.4-node-v67-darwin-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp)
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
../fsevents.cc:63:6: warning: field 'async_resource' will be initialized after
field 'lockStarted' [-Wreorder]
: async_resource("fsevents:FSEvents"), lockStarted(false) {
^
1 warning generated.
SOLINK_MODULE(target) Release/fse.node
COPY /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64/fse.node
TOUCH Release/obj.target/action_after_build.stamp
> [email protected] install /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library
node-pre-gyp ERR! Tried to download(403): https://storage.googleapis.com/grpc-precompiled-binaries/node/grpc/v1.10.1/node-v67-darwin-x64-unknown.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp ERR! Pre-built binaries not installable for [email protected] and [email protected] (node-v67 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp ERR! Hit error Connection closed while downloading tarball file
CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o
rm: ./Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o.d.raw: No such file or directory
make: *** [Release/obj.target/grpc/deps/grpc/src/core/lib/surface/init.o] Error 1
gyp CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/avl/avl.o
ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:188:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)
gyp ERR! System Darwin 18.2.0
gyp ERR! command "/usr/local/Cellar/node/11.6.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node" "--module_name=grpc_node" "--module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown"
gyp ERR! cwd /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
gyp ERR! node -v v11.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/Cellar/node/11.6.0/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node --module_name=grpc_node --module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:188:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:978:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
node-pre-gyp ERR! System Darwin 18.2.0
node-pre-gyp ERR! command "/usr/local/Cellar/node/11.6.0/bin/node" "/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
node-pre-gyp ERR! node -v v11.6.0
node-pre-gyp ERR! node-pre-gyp -v v0.7.0
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/Cellar/node/11.6.0/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node --module_name=grpc_node --module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown' (1)
CXX(target) Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.oe
shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory
shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory
/bin/sh: ./Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o.d: No such file or directory
sed: ./Release/.deps/Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o.d.raw: No such file or directory
make: *** [Release/obj.target/grpc/deps/grpc/src/core/lib/backoff/backoff.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (events.js:188:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)
gyp ERR! System Darwin 18.2.0
gyp ERR! command "/usr/local/Cellar/node/11.6.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown/grpc_node.node" "--module_name=grpc_node" "--module_path=/Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc/src/node/extension_binary/node-v67-darwin-x64-unknown"
gyp ERR! cwd /Users/seanlanghi/Documents/Dev/Training/React/Examples/hackernews-react-graphql/node_modules/grpc
gyp ERR! node -v v11.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] requires a peer of eslint-plugin-jsx-a11y@^5.1.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-addons-test-utils@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-test-renderer@^15.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 15.4.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 15.4.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 15.4.x but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/seanlanghi/.npm/_logs/2019-01-14T00_10_59_096Z-debug.log
Seans-MacBook-Pro:hackernews-react-graphql seanlanghi$ which yarn
/usr/local/bin/yarn
I'm not a security expert, but wouldn't it be advisable to only store the hashed password of a user? My understanding is that the LocalStrategy does not do any hashing for you, so the Cache is holding a plaintext copy of each user's password in memory.
In both files comment-services.ts and news-item-service.ts, the loggers aren't bound to console.
it will hang when trying to build docker container. it stops at step "RUN npm run build". I did some debug, it looks like hangs at "next build" command. any suggestion where to look next?
command -
docker build --tag 'clintonwoo/hackernews-react-graphql:latest' --rm .
docker freeze at here -
Step 7/17 : RUN npm run build
---> Running in daef81749112
[email protected] build /usr/src/app
npm run clean && tsc --project tsconfig.server.json && next build
[email protected] clean /usr/src/app
rm -rf build/app && rm -rf dist && rm -rf src/.next
Creating an optimized production build ...
Using external babel configuration
Location: "/usr/src/app/babel.config.js"
Browserslist: caniuse-lite is outdated. Please run next commandnpm update
Compiled successfully.
┌ /
├ /_app
├ /_document
├ /_error
├ /active
├ /ask
├ /best
├ /bestcomments
├ /bookmarklet
├ /changepw
├ /dmca
├ /favorites
├ /forgot
├ /formatdoc
├ /front
├ /hidden
├ /item
├ /jobs
├ /leaders
├ /lists
├ /login
├ /newcomments
├ /newest
├ /newpoll
├ /newsfaq
├ /newsguidelines
├ /newswelcome
├ /noobcomments
├ /noobstories
├ /reply
├ /security
├ /show
├ /showhn
├ /shownew
├ /submit
├ /submitted
├ /threads
├ /upvoted
└ /user
I tried running the code
=> npm install
At the first installation, it says 'Can't find Python executable', but I resolved it by installing a python.
But after that when I tried running again, I got another error
Traceback (most recent call last): File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\gyp_main.py", line 16, in <module> sys.exit(gyp.script_main()) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 545, in script_main return main(sys.argv[1:]) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 538, in main return gyp_main(args) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\__init__.py", line 523, in gyp_main generator.GenerateOutput(flat_list, targets, data, params) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\generator\msvs.py", line 2025, in GenerateOutput version=msvs_version) File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\MSVSNew.py", line 213, in __init__ self.Write() File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\MSVSNew.py", line 340, in Write f.close() File "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\gyp\pylib\gyp\common.py", line 393, in close os.rename(self.tmp_path, filename) WindowsError: [Error 183] Cannot create a file when that file already exists
Anyone has a clue to resolve this?
When I ran command "npm test", I received error:
Pattern: jest.config.js - 0 matches
npm ERR! Test failed.
The current test script is described as
"test": "jest --config --runInBand jest.config.js"
To fix it, I changed the script to:
"test": "jest --config jest.config.js --runInBand"
When there is an error on build npm run nodemon
causing infinite reloads (because of next.js) so there is no a easy way to develop the BE part without building manually after each change.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.