gothinkster/realworld

New to topics? Read the documentation here!

Top articles Latest articles New article in topic

Show body

gothinkster/realworld by

Ciro Santilli 34 Updated 2024-11-15 Created 1970-01-01

github.com/gothinkster/realworld

Ciro Santilli's implementation: node Express Sequelize Next.js realworld example app.

Ahh, you can't have new ideas anymore!

Basically puts together every backend with Front-end web framework to create the exact same website.

The reference live demo can be found at: demo.realworld.io/#/ It is based on Angular.js as it links to: github.com/gothinkster/angularjs-realworld-example-app TODO backend?

There are however also live demos of other frontends, e.g.:

React: react-redux.realworld.io. But note that tag addition at post creation is broken there as of March 2021, but not on master: github.com/gothinkster/react-redux-realworld-example-app/issues/151#issuecomment-808417846 so they forgot to update the live server.
Vue.js: vue-vuex-realworld.netlify.app

Note that all those frontends communicate with the same backend.

As of 2021 Devs are seemed a bit too focused on monetizing the project through their "how to use this project" premium tutorial, and documentation could be better: just getting the hello world of the most popular backend with the most popular frontend is not easy... come on.

github.com/gothinkster/realworld/issues/578 asks for community support, as devs have moved on since unfortunately.

Remember:

by default, the frontends hardcode the upstream public data API: https://conduit.productionready.io/api so you have to hack their code to match the port of the backend. And each backend can have a different port.
when you switch between backends, you must first manually clear client-side storage cookies/local new run will fail due to authentication issues!

Important missing things from the minimum base app:

server-side rendering:
- github.com/arrlancore/nextjs-ssr-real-world-app-example. As advertised, that global instance does render with JavaScript disabled! Proposed for upstream at: github.com/gothinkster/realworld/issues/423
- github.com/gothinkster/realworld/issues/266
no javaScript bi-directional communication library built-in... come on: github.com/gothinkster/realworld/issues/107
email notifications however as tested on the live demo: demo.realworld.io/#/
error handling is broken/missing/inconsistent across apps

First you should the most popular backend/frontend combination running, which is the most likely to be working. We managed to run on Ubuntu 20.10, React + Node.js Express.js as described at github.com/gothinkster/node-express-realworld-example-app/pull/116:

github.com/cirosantilli/node-express-realworld-example-app/tree/mongo4 which has a simple patch on top of github.com/gothinkster/node-express-realworld-example-app/tree/ba04b70c31af81ca7935096740a6e083563b3a4a for MongoDB 4 support
This requires you to first install MongoDB on Ubuntu and ensure you can login to it from the command line.

github.com/gothinkster/react-redux-realworld-example-app/tree/9186292054dc37567e707602a15a0884d6bdae35 patched to use the correct server host/port localhost:3000:

diff --git a/src/agent.js b/src/agent.js
index adfbd72..e3cdc7f 100644
--- a/src/agent.js
+++ b/src/agent.js
@@ -3,7 +3,7 @@ import _superagent from 'superagent';

 const superagent = superagentPromise(_superagent, global.Promise);

-const API_ROOT = 'https://conduit.productionready.io/api';
+const API_ROOT = 'http://localhost:3030/api';

 const encode = encodeURIComponent;
 const responseBody = res => res.body;

Then just:

npm install
npm start

on both server and client, and then visit the client URL: localhost:4100/

You have to hit the Enter key to add tags, it's terrible: github.com/gothinkster/react-redux-realworld-example-app/issues/151#issuecomment-808417846

One cool thing is that the main repo has unified backend API tests:

git clone https://github.com/gothinkster/realworld
cd realworld
git checkout e7adc6b06b459e578d7d4a6738c1c050598ba431
cd api
APIURL=http://localhost:3000/api USERNAME="u$(date +%s)" ./run-api-tests.sh

so the per-repository tests are basically useless, and that single test can test everything for any backend! There is no frontend testing however: github.com/gothinkster/realworld/issues/269 so newb.

Read the full article