Hello world website

Table of contents
- A blog in every web framework Hello world website
  - gothinkster/realworld A blog in every web framework
    - gothinkster/realworld implementation gothinkster/realworld
- TodoMVC Hello world website

A blog in every web framework

A (multi-user) blog is the hello world of the web, so creating one of those is the best way to quickly evaluate web technology, i.e. time to Hello World.

Some new frameworks like FeathersJS are making a chat app instead, as that highlights the push notifications a bit better.

gothinkster/realworld

0 0

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.