Ciro Santilli @cirosantilli 34

 Incoming links: Vue.js

gothinkster/realworld  Updated 2024-12-15  +Created 1970-01-01

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

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

gothinkster/realworld implementation  Updated 2024-12-15  +Created 1970-01-01

 View more

Setups we've tried:

backend:
- randyscotsmithey/feathers-realworld-example-app worked with React and Vue.js
- the React setup failed as shown at: github.com/gothinkster/react-redux-realworld-example-app/issues/187
- gothinkster/django-realworld-example-app
- the Nest.js failed on Ubuntu 20.10 as per github.com/lujakob/nestjs-realworld-example-app/issues/19
frontend:

 Read the full article

randyscotsmithey/feathers-realworld-example-app  Updated 2024-12-15  +Created 1970-01-01

 View more

FeathersJS entry for gothinkster/realworld.

MongoDB-based.

So once you install MongoDB, run with:

MONGODB_FEATHERS_REALWORLD=mongodb://localhost:27017/mydb npm start

Got it working on Ubuntu 20.10 with both React and Vue.js front-ends at github.com/randyscotsmithey/feathers-realworld-example-app/commit/8bc3a09242285de624c75bb8345630df499a7d07 as mentioned at github.com/randyscotsmithey/feathers-realworld-example-app/issues/2 except for bad error reporting on UI.

Tests can be run with:

MONGODB_FEATHERS_REALWORLD=mongodb://localhost:27017/mydb npm run test

but there were 10 failures and 55 passes: github.com/randyscotsmithey/feathers-realworld-example-app/issues/3

 Read the full article

Sails.js  Updated 2024-12-15  +Created 1970-01-01

 View more

github.com/balderdashy/sails

Front-end web framework integration: no native one:

React:
- github.com/markmur/sails-react-webpack
- github.com/sepineda/sails-react-webpack Last updated as of 2021: 2018
- stackoverflow.com/questions/28331032/sails-js-with-react-js-how-to-do-it-correctly
Vue.js:
- github.com/mikermcneil/ration Issue tracker disabled...
  - live at: ration.io/
  - selling a course at: courses.platzi.com/courses/sails-js/
- platzi.com/cursos/javascript-pro/ non-free and in Spanish pointed to from official README...
- Nuxt.js:
  - github.com/AngelMunoz/sails-nuxt

TODO server-side rendering anyone??

 Read the full article