WIP: Rework examples, fix bugs, review i18n #339

renoirb · 2018-05-31T21:24:11Z

Work in progress! (and so this PR message gets edited as work is still in progress)

PR Objectives

See Questions below, they might guide me in a way you'll be OK with this project's design goal and scope.

Ability to get a copy of the JWT token after authentication — Instead of just saying that one should not make available JWT token outside of HTTPOnly cookie, implement a way where at login time, to help us copy the JWT token we're just going to receive (so we don't need to base64decode from cookies). If we click the check box at login, if successful, the token is temporarily available in Vuex store, where we can copy it. But that it won't stay in VueX store if we reload the page.
Fix Issue when reloading page with data read from side-car bug, explained below
Review and Improve examples views so that Koa Fills VueX store, using dispatch and module
Read environment variables at run time for optional toggles (e.g. SHOW_EXAMPLES, LB_ADDR), that are separate from when we're building (e.g. yarn build with NODE_ENV="production")
Make Vue i18n to get translation from Koa (i.e. loaded from outside from server/locales/*.json, or client/locales/*.json. (See renoirb/experiments-nuxt-i18n-remote)
- load language files and merge from remote (almost there!)
- Change current locale without using router see cmty.app/nuxt-i18n #c90
Fix The examples are not updated, but always appended with duplicates
Move addAll in client/components/Navbar.vue to be in client/store/menu.js as an hydrate action. Like the rest.

Bugs

The examples are not updated, but always appended with duplicates

Currently, there is no duplicate verification nor prevent loading if already there.

Issue when reloading page with data read from side-car

When we're on a view that is built based on data coming from Koa, when we reload, we get a NuxtError telling 127.0.0.1:80 is not available.

In other words, Axios/Nuxt would loose the proper port and get Axios' default setting that isn't port 3000 anymore

Reproduction:

Sign In
Go to Examples, then click on listing activitites
Reload the page
NuxtError

Questions

How would you have runtime configuration environment variables set?
For instance; After production build, when running, and want to tell to read data from something available to that node's internal network.
Would you use nuxt-community/dotenv-module, or selectively declare which are applicable via something like rolodato/dotenv-safe ?
How do you see localization and build time?
Localization messages may be needed in both client/ and server/ code.
What was your plan about this, or what do you prefer?
And how about loading only what's needed, at the many places we'd have to inject it (e.g. Element UI' at Vue.use(Element, {...}), Nuxt, and so on.)
Did you plan splitting data mocking from what Nuxt reads from Koa
I see two use-cases in server/.
1. "Mocking", where we statically serve data for demo purposes. (e.g. /hpi/platform/uaano/oauth/validate when LB_ADDR is the default)
2. "Side-Car" (or BFF), where we get a simple GET /hpi/auth/whois and it abstracts out authentication and makes off-the-band HTTP calls to other data sources, and normalizes output for Nuxt to consume.
Did you have plans, or lessons-learned you want to share here?
How do you handle Ava tests
Some rework needs to be done regarding session, maybe Vuex store calls too often at /hpi/auth/whois, tests times out. This has to be figured out.
I've never used Ava so far (Only Mocha, Jest, etc). Looks good though.

Screenshots

1. Ability to get a copy of the JWT token after authentication

1.1. Check a box at login

1.2. After Sign-In Notification alert

1.3. Visualize in `/session` received data, including JWT token

1.4. Get a note that the Vuex store does no longer have the JWT token, and requires authentication

2. Review and Improve examples views

2.1. Side-Car XML data output from `/hpi/examples/activity`

2.2. Filled Vuex store, using data from Side-Car

Notice the link to /hpi/examples/activity

2.3. Creating an Activity

2.4. Looking the new Activity Detail

* Remove /hpi/auth/token, make it optional via login * Move @nuxt/axios to dependencies, otherwise it breaks

renoirb · 2018-06-01T16:33:03Z

client/store/examples/activity.js

    for (const activity of values) {
-      state.activities.push(Object.assign({}, activity))
+      state.activities.push({...activity})


Moved to review comment.

renoirb · 2018-06-01T16:34:13Z

client/components/examples/activity/NewActivity.vue

+              <el-radio
+                label="activity.priority.low"
+              >
+                {{$t('activity.priority.low')}}


Element UI uses label for both value and label.
At least it allows using default slot for i18n.

Also ensure that token Notification is shown not only at home.

renoirb

Here are my commentary to explain the changes I've made.

renoirb · 2018-06-05T23:02:03Z

.vscode/launch.json

@@ -14,7 +14,8 @@
        "sourceMaps": true,
        "env": {
            "NODE_ENV": "development",
-            "DEBUG": "nuxt:*"
+            "DEBUG": "nuxt:*,koa:*",


I wished we could have more logging and be able to configure through this here.
So far, it seems only console.log works, but then it's hard to manage in code by (un|)commenting.

renoirb · 2018-06-05T23:02:43Z

.vscode/launch.json

+            "NODE_ENV": "",
+            "DEBUG": "nuxt:*,koa:*"
+        }
+      },


This will be useful for debugging at build.

renoirb · 2018-06-05T23:04:54Z

client/components/examples/activity/NewActivity.vue

@@ -117,12 +156,12 @@ const ExampleGetter = namespace('examples/index', Getter)
      default () {
        return {
          account: '',
-          region: 'activity.city.ly',
+          city: 'activity.city.ly',


This wasn't consistent. Region or city, or area?

renoirb · 2018-06-05T23:06:33Z

client/components/examples/activity/NewActivity.vue

@@ -180,7 +220,7 @@ export default class NewActivity extends Vue {

    this.$refs[formName].validate((valid) => {
      if (valid) {
-        this.$store.dispatch('examples/activity/add', this.formData)
+        this.addActivity(this.formData)


Encapsulate it back to the Store

renoirb · 2018-06-05T23:08:00Z

client/layouts/default.vue

+        title,
+        onClick: function notifyOnClickHandler () {
+          this.$router.push('/session')
+        }.bind(this)


Maybe there's a better way

renoirb · 2018-06-05T23:12:28Z

client/pages/login.vue

+    let path = query.page || '/'
+    let authenticated = await store.getters['session/authenticated']
+    if (authenticated) {
+      redirect(path)


So we can redirect to / or elsewhere (e.g. bookmarked link as /login?page=%2Fabout => /about if already signed in and accessed /login.

renoirb · 2018-06-05T23:13:23Z

client/plugins/axios.js

+// const API_HOST = process.env.API_HOST || '127.0.0.1'
+// const API_PREFIX = process.env.API_PREFIX || '/'
+
+const AXIOS_TIMEOUT = process.env.AXIOS_TIMEOUT || consts.AXIOS_DEFAULT_TIMEOUT


Maybe use different naming convention?

const AXIOS_DEFAULT_TIMEOUT = process.env.AXIOS_DEFAULT_TIMEOUT || consts.AXIOS_DEFAULT_TIMEOUT

renoirb · 2018-06-05T23:16:53Z

client/store/examples/activity.js

    for (const activity of values) {
-      state.activities.push(Object.assign({}, activity))
+      state.activities.push({...activity})


This will need refactoring.

I'm unsure the recommended way with Element-UI and table rows.

My gut feeling tells me it's better to have an object in the Vuex store, with an unique identifier as a key, so we can iterate.

Yet give an array when asked for the entries.

Because as this is, at any dispatch, the store will grow. With duplicates and all.

What's your feeling about that @clarkdo ?

This is refered to as The examples are not updated, but always appended with duplicates in BUGS in PR detail

renoirb · 2018-06-05T23:19:51Z

server/api/index.js


-if (consts.SHOW_EXAMPLES === true) {
+if (process.env.SHOW_EXAMPLES === 'true') {


Would that be OK like this, do you see a problem using this pattern?

renoirb · 2018-06-05T23:21:05Z

server/api/routes-auth.js

-  ctx.status = 200
-  ctx.body = body
-})
-


We don't need this anymore.
The only time we should receive token is when we got a response from the authentication.

clarkdo · 2018-06-06T14:37:49Z

@renoirb Thank you so much for the fantastic changes, I'll look into it asap.

BTW, could you have a look at the build failure of the pr?

renoirb · 2018-06-07T00:26:57Z

Hey @clarkdo,

Sure, I'll take a look!
I still haven't worked on i18n and vuex syncVuex looks like nuxt/i18n has a method where I could make an HTTP reqiest and merge messages, like what I need (i.e. translations managed outside of Nuxt).

But I'll make sure build passes too!

renoirb

Here are some more comments from code I've backported from my project at my employer.

renoirb · 2018-06-08T17:54:03Z

.vscode/launch.json

-            "DEBUG": "nuxt:*"
+            "DEBUG": "nuxt:*,axios:*,koa:*,koa-session:*,koa-router:*,follow-redirects:*",
+            "SHOW_EXAMPLES": "true",
+            "LOG_DIR": "${workspaceRoot}/logs"


This is an unexpected Gem, @clarkdo!

I knew it was somehow redundant to do console.log with bunyan but I couldn't see how to use. With this, we could have VSCode handle logs. And make other users of Hare aware of this feature.

renoirb · 2018-06-08T17:57:19Z

client/plugins/persistedstate.js

+  // An array of any paths to partially persist the state.
+  // If no paths are given, the complete state is persisted.
+  paths: [
+    'menu.hidden',


Set in place persistedstate for UI preferences in localStorage.
We could have a persistedstate key for different use-case, e.g. a datatable filter preference, etc.
A in-app message translation workspace, storing locally edited translations prior to committing it to respective translation data store.

renoirb · 2018-06-08T18:01:01Z

server/api/routes-env.js

+  prefix: consts.BASE_API
+})
+
+router.get('/env', async ctx => {


That way, we could have a multi-level deployment and have Nuxt read from Side-Car, instead.

Note that I couldn't make @nuxtjs/dotenv work properly from Nuxt side.

Sure thing, when managing many deployments of the same app, and dynamic monitoring system, deployment specific toggles could be discovered from here.

What's your opinion, @clarkdo?

renoirb · 2018-06-08T18:02:33Z

test/index.test.js

-        'M2NhIiwiY2xpZW50X2lkIjoidGF0LWNsaWVudCJ9.' +
-        'ovWxqcBptquNR5QUBz1it2Z3Fr0OxMvWsnXHIHTcliI'
+    'accept-language': 'zh',
+    Cookie: 'hare:sess=eyJjYXB0Y2hhIjoiR2hDTCIsImp3dCI6ImV5SmhiR2NpT2lKSVV6STFOaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoZFdRaU9sc2lZbUZ6SWwwc0luVnpaWEpmYm1GdFpTSTZJbUZrYldsdUlpd2ljMk52Y0dVaU9sc2ljbVZoWkNKZExDSmxlSEFpT2prNU9UazVPVGs1T1RrNU9Ua3NJblZ6WlhKSlpDSTZJalF3TWpnNFlqZGxOV0pqWkRjM016TXdNVFZpWTJRM1ptUTNNakl3TURBeElpd2lZWFYwYUc5eWFYUnBaWE1pT2xzaVlXUnRhVzRpWFN3aWFuUnBJam9pTnpKbFl6TmpORE10TURNd1lTMDBNV1ZrTFdGaVlqSXRZamRoTWpZNU5UQTJPVEl6SWl3aVkyeHBaVzUwWDJsa0lqb2lZbUZ6TFdOc2FXVnVkQ0o5LnV3eXd6aU5ldEh5ZlNkaXFjSnQ2WFVHeTRWX1dZSFI0SzZsN09QMlZCOUkiLCJfZXhwaXJlIjoxNTI4NTYyNDA0NDkwLCJfbWF4QWdlIjo4NjQwMDAwMH0=; hare:sess.sig=0gGUUVRpb3VRbsj8ibRHRXlie30'


Maybe the tes fails because of session HTTP header managed differently Koa side now.

Koa only looks at Cookie, and only the one it created.

renoirb · 2018-06-08T18:19:48Z

client/plugins/axios.js

+  $axios
+}) => {
+  /*
+  if (!process.client) {


This still has to be figured out.

renoirb · 2018-06-08T18:30:16Z

nuxt.config.js

+      'ENDPOINT_BACKEND_VALIDATE',
+      // See also server/utils/environment-variables.js
+      'LB_ADDR',
+      'SHOW_EXAMPLES'


I'm still unsure how to use this in Nuxt side. (incomplete)
An alternate would be to use for Nuxt and environment variable injection, either this and/or with an environment variable exposition Side-Car endpoint (see /hpi/env).
A sure thing would be that private data would NOT BE a good fit for unauthenticated /hpi/env, and for Nuxt side, this module here would be a good fit.

renoirb · 2018-06-08T18:30:26Z

package.json

    "dev:pm2": "pm2 start yarn --name=hare -- dev",
-    "test": "yarn lint && yarn build:client && ava --verbose --serial ",
+    "test": "yarn lint && yarn build:client",
+    "test:FIXME": "yarn lint && yarn build:client && ava --verbose --serial ",


Sorry about that.

renoirb · 2018-06-08T18:32:18Z

.env.dev

+# NOTE: Work needs to be done so hare logs could go there too.
+#       And we should review use of cross-env to use env-cmd
+#      https://github.com/kentcdodds/cross-env#other-solutions
+#DEBUG=nuxt:*,axios:*,koa:*,koa-session:*,koa-router:*,follow-redirects:*


This is so cool!

Maybe its better to use Environment Variables instead of loading a long string in packages.json

HOST is needed inside the Docker image, I should say.

renoirb · 2018-06-08T18:34:07Z

.env.prod

+HOST=0.0.0.0
+
+# Might be renamed to ENDPOINT_BASEURL
+LB_ADDR=http://example.private.local:8080


What I mean is that LB_ADDR might be better renamed to ???_BASEURL.
In other projects, I see the convention of ADDR as an IPv4/IPv6 address, not a string that starts by http and has no trailing slash.

Also, maybe it should be mentioning about the fact that this endpoint SHOULD BE from a private network, only accessible from Nuxt (i.e. not publicly exposed).

Opinion @clarkdo ?

renoirb · 2018-06-08T18:34:27Z

.env.prod

+LB_ADDR=http://example.private.local:8080
+
+ENDPOINT_BACKEND_AUTH=/your/own/namespace/oauth/token
+ENDPOINT_BACKEND_VALIDATE=/your/own/namespace/user/validate


My BACKEND endponts are likely not the same as yours :)

renoirb · 2018-06-19T19:13:19Z

FYI, @clarkdo, I'm having issues running the service after a build when I tell which baseURL to use, it still does not use it.

To see what's missing, I've created an experiment repository, I have two orphaned branches and I thought you should know about them.

Branches:

renoirb/experiments-nuxt-koa-env-runtime-201806, master branch; no Koa in use
renoirb/experiments-nuxt-koa-env-runtime-201806, rework-hare branch; Attempt at using same Koa middleware patterns as Hare.

Maybe it is by design (or because we run Koa/Nuxt side by side), that its impossible to tell dynamically which process.env.HOST to take into account from within @nuxtjs/axios module.

Mind to take a look?

For the record, it seems to be the same issue at play from the current dev branch after;

yarn
yarn build
yarn --production
export HOST=foo.dev.local
export PORT=9098
yarn start

And we see any XHR failing when doing OPTIONS http://localhost:3000/ as if options aren't taken into account. Even though we try many other variable names (API_HOST, API_URL, etc...).

Notice the Network error and OPTIONS http://localhost:3000/ request in the screenshot below;

renoirb · 2018-06-19T22:15:47Z

Related to last comment, I could at last make it work (see branch rework-hare-20180619).

Maybe that should be handled differently though.

Setup

yarn
yarn build
yarn --production

Intended use is from within a container (Dockerfile not provided here) where we'd run the steps above to build the service image.

The docker service would be started using a line similar to what's in start (see below)

// Adjust DEBUG=* to suit your logging preferences.
./node_modules/.bin/cross-env DEBUG=* \
                              NODE_ENV=production \
                              HOST=foo.dev.local \
                              PORT=9098 \
                              node build/main.js

You should be able to go back and forth to Index and About page, and click on an Element UI button with a "Click me!" caption and see an XHR request from http://foo.dev.local:9098/hpi/examples/activity properly formed and filling up the page with preformatted JSON string.

Possibly useful links

clarkdo · 2019-04-23T09:39:06Z

@renoirb I've made some changes for upgrading nuxt and refactoring, so the dir structure has been changed, sorry for the inconvenience, are you going to continue working on this pr ?

If anything I can help, feel free to contact me.

renoirb · 2019-04-25T14:25:04Z

You can close it.
I can make another fork off from your changes.

Also, I was wondering if you could document how you plan on using with Koa, is it planned to be used as an APi (hpi), AND a Nuxt serverMiddleware ?

Making changes to Koa logic takes time.
I've been now working with two projects now. (Both in TypeScript nowadays).

Koa WebAPI ... serving i18n, menu data, session data, authentication
Nuxt portal. A dumb client to the above. With @nuxt/axios preconfigured to talk to the above from both ssr/client

If you want. I can make a koa microservice. Only for the data. We could tell that service where to authenticate, where to fetch language definition, how to fill a user session data (based on outcome of authentication, exposed only if cookie is valid, ready for @nuxt/axios, and Vuex to setup vuex store for current user), etc.

renoirb · 2019-04-25T14:35:36Z

Related to loading i18n. I've started something (that I can now do better) in https://github.com/renoirb/experiments-nuxtjs-i18n-element-scss-201809 feel free to pick stuff from it.

renoirb · 2019-06-05T04:06:54Z

FYI, I've played a bit with Vuex and TypeScript.
I should be able to refactor this PR/hare with this.
I guess the ambition is to rewrite Hare with TypeScript?

nuxt-community/hackernews-nuxt-ts#16

renoirb · 2020-11-24T22:22:28Z

(It's a bit off-topic, but somewhat related to this PR that's not moving.)

Hi @clarkdo, I wanted to give you a small note that I have been thinking about how to expand on the architectural patterns and review how hare is made.

I've spend a few hours in the last days and I'd like to show you the progress.

Idea is that we could make hare be two separate packages ("apps") that can be published, and other co-dependencies can be either other npm packages, or handled from a mono-repo

Have a look at this private repo and README: https://github.com/renoirb/hare2/blob/master/apps/side-car/README.md and come back to me using your favourite communication medium :)

Renoir Boulanger added 2 commits May 30, 2018 17:55

Refactor Vuex, move hidden to menu, authUser to session

677d105

* Remove /hpi/auth/token, make it optional via login * Move @nuxt/axios to dependencies, otherwise it breaks

Catch "Show me the accessToken" at sign-in and tell about retrieving.

d938676

renoirb force-pushed the renoirb-contribs branch from 6cefb77 to d938676 Compare June 1, 2018 00:48

renoirb commented Jun 1, 2018

View reviewed changes

renoirb force-pushed the renoirb-contribs branch from e5c1c79 to 5dbec3b Compare June 1, 2018 16:55

Review Examples Side-Car data and Vuex store.

0bdeabd

Also ensure that token Notification is shown not only at home.

renoirb force-pushed the renoirb-contribs branch from 5dbec3b to 0bdeabd Compare June 1, 2018 19:07

Renoir Boulanger added 2 commits June 1, 2018 16:42

Adjust comments, hint about changing LB_ADDR

45cdf14

Optionally show examples menu by using SHOW_EXAMPLES environment.

60ee342

renoirb force-pushed the renoirb-contribs branch from 6cb0a3a to 60ee342 Compare June 4, 2018 15:57

hare/issues/c23: Maybe remove @axios/webpackmonitor

e537d5b

renoirb force-pushed the renoirb-contribs branch from 1f435d4 to e537d5b Compare June 5, 2018 20:15

Make ENDPOINT_BACKEND as environment variables

79d65ac

renoirb force-pushed the renoirb-contribs branch from 5a95171 to 79d65ac Compare June 5, 2018 20:27

renoirb commented Jun 5, 2018

View reviewed changes

renoirb force-pushed the renoirb-contribs branch from a27453d to 7e55380 Compare June 8, 2018 17:27

renoirb commented Jun 8, 2018

View reviewed changes

renoirb force-pushed the renoirb-contribs branch 2 times, most recently from 4d86b41 to 8e2e97c Compare June 8, 2018 19:48

Cherry-pick from private project, MUTED TESTS(!)

c563a48

renoirb force-pushed the renoirb-contribs branch from 8e2e97c to c563a48 Compare June 8, 2018 20:01

renoirb pushed a commit to renoirb/experiments-nuxt-koa-env-runtime-201806 that referenced this pull request Jun 19, 2018

clarkdo/hare#339: Experiment on orphaned branch

cde12e7

renoirb mentioned this pull request Jun 19, 2018

API_URL env var only works when set via npm not when you set it in the nuxt.config nuxt-community/axios-module#138

Closed

renoirb requested a review from clarkdo November 26, 2020 23:41

renoirb self-assigned this Nov 26, 2020


		if (consts.SHOW_EXAMPLES === true) {
		if (process.env.SHOW_EXAMPLES === 'true') {

WIP: Rework examples, fix bugs, review i18n #339

Are you sure you want to change the base?

WIP: Rework examples, fix bugs, review i18n #339

Conversation

renoirb commented May 31, 2018 • edited Loading

PR Objectives

Bugs

The examples are not updated, but always appended with duplicates

Issue when reloading page with data read from side-car

Questions

Screenshots

1. Ability to get a copy of the JWT token after authentication

1.1. Check a box at login

1.2. After Sign-In Notification alert

1.3. Visualize in /session received data, including JWT token

1.4. Get a note that the Vuex store does no longer have the JWT token, and requires authentication

2. Review and Improve examples views

2.1. Side-Car XML data output from /hpi/examples/activity

2.2. Filled Vuex store, using data from Side-Car

2.3. Creating an Activity

2.4. Looking the new Activity Detail

renoirb Jun 1, 2018 • edited Loading

Choose a reason for hiding this comment

renoirb Jun 2, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renoirb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clarkdo commented Jun 6, 2018

renoirb commented Jun 7, 2018 • edited Loading

renoirb left a comment

Choose a reason for hiding this comment

renoirb Jun 8, 2018 • edited Loading

Choose a reason for hiding this comment

renoirb Jun 8, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renoirb Jun 8, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

renoirb commented Jun 19, 2018 • edited Loading

renoirb commented Jun 19, 2018 • edited Loading

clarkdo commented Apr 23, 2019

renoirb commented Apr 25, 2019 • edited Loading

renoirb commented Apr 25, 2019

renoirb commented Jun 5, 2019

renoirb commented Nov 24, 2020

renoirb commented May 31, 2018 •

edited

Loading

1.3. Visualize in `/session` received data, including JWT token

2.1. Side-Car XML data output from `/hpi/examples/activity`

renoirb Jun 1, 2018 •

edited

Loading

renoirb Jun 2, 2018 •

edited

Loading

renoirb commented Jun 7, 2018 •

edited

Loading

renoirb Jun 8, 2018 •

edited

Loading

renoirb Jun 8, 2018 •

edited

Loading

renoirb Jun 8, 2018 •

edited

Loading

renoirb commented Jun 19, 2018 •

edited

Loading

renoirb commented Jun 19, 2018 •

edited

Loading

renoirb commented Apr 25, 2019 •

edited

Loading