Howto configure frontend?

[schniggie]

First of all, thank you so much for this ;)

I assume several values of your extended .env (feature/local-hosting) needs to be adapted. Can you give a short summary what needs to be changed to connect the frontend with my self-hosted backend?

# Google Analytics ID
GA_ID=UA-61422507-4

# Google Tag Manager ID
GTM_ID=GTM-NMKVBMV

# Firebase config
API_KEY=AIzaSyCMsFreESs58-hRxTtiqQrIcimh4i1wbsM
AUTH_DOMAIN=postwoman-api.firebaseapp.com
DATABASE_URL=https://postwoman-api.firebaseio.com
PROJECT_ID=postwoman-api
STORAGE_BUCKET=postwoman-api.appspot.com
MESSAGING_SENDER_ID=421993993223
APP_ID=1:421993993223:web:ec0baa8ee8c02ffa1fc6a2
MEASUREMENT_ID=G-BBJ3R80PJT

# Base URL
BASE_URL=https://hoppscotch.io

# Shortcode URL Base
SHORTCODE_BASE_URL=https://hopp.sh

# API
API_URL=https://api.hoppscotch.io/graphql
API_WS_URL=wss://api.hoppscotch.io/graphql

I am not sure about that Google Analytics and Tag manager crap, then which Firebase values needs to me changed and where do I find the values in my console? What is that newly added SHORTCODE_BASE_URL?

Highly appreciate your help

[jerbob92]

Hi!

GA_ID and GTM_ID can be left empty, I did that too.

SHORTCODE_BASE_URL can be the same as BASE_URL if you don't want a separate domain for the shortcodes.

In Firebase, create a project, and under project settings, Your apps, add an web app, most env config values can be found in the example config. The only one that isn't in there are DATABASE_URL and that's basically https://{{PROJECT_ID}}.firebaseio.com.

[schniggie]

Perfect than your for fast response. Lastly, I see the following error when building the frontend

#0 87.72 packages/hoppscotch-app postinstall$ pnpm run gql-codegen
#0 88.49 packages/hoppscotch-app postinstall: > hoppscotch-app@2.2.1 gql-codegen /app/packages/hoppscotch-app
#0 88.49 packages/hoppscotch-app postinstall: > graphql-codegen --require dotenv/config --config gql-codegen.yml
#0 90.32 packages/hoppscotch-app postinstall: [14:27:18] Parse configuration [started]
#0 90.33 packages/hoppscotch-app postinstall: [14:27:18] Parse configuration [completed]
#0 90.33 packages/hoppscotch-app postinstall: [14:27:18] Generate outputs [started]
#0 90.33 packages/hoppscotch-app postinstall: [14:27:18] Generate helpers/backend/graphql.ts [started]
#0 90.33 packages/hoppscotch-app postinstall: [14:27:18] Generate helpers/backend/backend-schema.json [started]
#0 90.33 packages/hoppscotch-app postinstall: [14:27:18] Load GraphQL schemas [started]
#0 90.33 packages/hoppscotch-app postinstall: [14:27:18] Load GraphQL schemas [started]
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] Load GraphQL schemas [failed]
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] → Failed to load schema
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] Load GraphQL schemas [failed]
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] → Failed to load schema
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] Generate helpers/backend/graphql.ts [failed]
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] → Failed to load schema
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] Generate helpers/backend/backend-schema.json [failed]
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] → Failed to load schema
#0 90.44 packages/hoppscotch-app postinstall: [14:27:18] Generate outputs [failed]
#0 90.44 packages/hoppscotch-app postinstall: Something went wrong
#0 90.46 packages/hoppscotch-app postinstall:  ELIFECYCLE  Command failed with exit code 1.
#0 90.46 packages/hoppscotch-app postinstall: Failed
#0 90.47  ELIFECYCLE  Command failed with exit code 1.
------
failed to solve: executor failed running [/bin/sh -c pnpm i --unsafe-perm=true]: exit code: 1

So looks like it cannot fetch the schema from the running backend. Backend is reachable from frontend, see:

curl -kI https://rest-backend.mic.offsec.corpintra.net/graphql/
HTTP/2 307 
content-type: text/html; charset=utf-8
date: Tue, 09 Aug 2022 14:31:06 GMT
location: /graphql
server: Caddy
server: openresty
x-served-by: rest-backend.mic.offsec.corpintra.net

However, I have to make use of a corp trusted (internal) certificate, and the building image has no trust in this CA, I would assume prepending NODE_TLS_REJECT_UNAUTHORIZED=0 to graphql-codegen will do the trick.

But finally the build fails with a dependancy issue:

#0 83.76 packages/hoppscotch-app postinstall$ pnpm run gql-codegen
#0 84.62 packages/hoppscotch-app postinstall: > hoppscotch-app@2.2.1 gql-codegen /app/packages/hoppscotch-app
#0 84.62 packages/hoppscotch-app postinstall: > NODE_TLS_REJECT_UNAUTHORIZED=0 graphql-codegen --require dotenv/config --config gql-codegen.yml
#0 87.61 packages/hoppscotch-app postinstall: [14:39:12] Parse configuration [started]
#0 87.62 packages/hoppscotch-app postinstall: [14:39:12] Parse configuration [completed]
#0 87.62 packages/hoppscotch-app postinstall: [14:39:12] Generate outputs [started]
#0 87.62 packages/hoppscotch-app postinstall: [14:39:12] Generate helpers/backend/graphql.ts [started]
#0 87.62 packages/hoppscotch-app postinstall: [14:39:12] Generate helpers/backend/backend-schema.json [started]
#0 87.62 packages/hoppscotch-app postinstall: [14:39:12] Load GraphQL schemas [started]
#0 87.62 packages/hoppscotch-app postinstall: [14:39:12] Load GraphQL schemas [started]
#0 87.70 packages/hoppscotch-app postinstall: (node:225) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
#0 87.70 packages/hoppscotch-app postinstall: (Use `node --trace-warnings ...` to show where the warning was created)
#0 87.78 packages/hoppscotch-app postinstall: (node:225) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
#0 87.88 packages/hoppscotch-app postinstall: [14:39:12] Load GraphQL schemas [completed]
#0 87.88 packages/hoppscotch-app postinstall: [14:39:12] Load GraphQL schemas [completed]
#0 87.88 packages/hoppscotch-app postinstall: [14:39:12] Load GraphQL documents [started]
#0 87.88 packages/hoppscotch-app postinstall: [14:39:12] Load GraphQL documents [started]
#0 87.89 packages/hoppscotch-app postinstall: [14:39:12] Load GraphQL documents [completed]
#0 87.89 packages/hoppscotch-app postinstall: [14:39:12] Generate [started]
#0 87.95 packages/hoppscotch-app postinstall: [14:39:13] Generate [completed]
#0 87.95 packages/hoppscotch-app postinstall: [14:39:13] Generate helpers/backend/backend-schema.json [completed]
#0 88.65 packages/hoppscotch-app postinstall: [14:39:13] Load GraphQL documents [completed]
#0 88.65 packages/hoppscotch-app postinstall: [14:39:13] Generate [started]
#0 88.89 packages/hoppscotch-app postinstall: [14:39:13] Generate [completed]
#0 88.89 packages/hoppscotch-app postinstall: [14:39:13] Generate helpers/backend/graphql.ts [completed]
#0 88.90 packages/hoppscotch-app postinstall: [14:39:13] Generate outputs [completed]
#0 88.93 packages/hoppscotch-app postinstall: Done
#0 88.94
#0 88.94 dependencies:
#0 88.94 + husky 7.0.4
#0 88.94 + lint-staged 12.3.1
#0 88.94
#0 88.94 devDependencies:
#0 88.94 + @commitlint/cli 16.1.0
#0 88.94 + @commitlint/config-conventional 16.0.0
#0 88.94 + @types/node 17.0.10
#0 88.94
#0 88.96  ERR_PNPM_PEER_DEP_ISSUES  Unmet peer dependencies
#0 88.96
#0 88.96 packages/hoppscotch-app
#0 88.96 ├─┬ @nuxt/types 2.15.8
#0 88.96 │ └─┬ sass-loader 10.1.1
#0 88.96 │   └── ✕ missing peer webpack@"^4.36.0 || ^5.0.0"
#0 88.96 ├─┬ @nuxt/typescript-build 2.1.0
#0 88.96 │ ├─┬ fork-ts-checker-webpack-plugin 6.4.0
#0 88.96 │ │ ├── ✕ missing peer webpack@">= 4"
#0 88.96 │ │ └── ✕ missing peer vue-template-compiler@"*"
#0 88.96 │ └─┬ ts-loader 8.3.0
#0 88.96 │   └── ✕ missing peer webpack@"*"
#0 88.96 ├─┬ @nuxtjs/eslint-module 3.0.2
#0 88.96 │ └─┬ eslint-webpack-plugin 2.5.4
#0 88.96 │   ├── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
#0 88.96 │   └── ✕ unmet peer eslint@^7.0.0: found 8.7.0
#0 88.96 ├─┬ @nuxtjs/stylelint-module 4.1.0
#0 88.96 │ ├── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
#0 88.96 │ └─┬ stylelint-webpack-plugin 2.3.1
#0 88.96 │   └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
#0 88.96 ├─┬ @nuxtjs/svg 0.3.0
#0 88.96 │ ├─┬ file-loader 6.2.0
#0 88.96 │ │ └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
#0 88.96 │ ├─┬ raw-loader 4.0.2
#0 88.96 │ │ └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
#0 88.96 │ ├─┬ url-loader 4.1.1
#0 88.96 │ │ └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"  
#0 88.96 │ └─┬ vue-svg-loader 0.16.0
#0 88.96 │   ├── ✕ missing peer vue-template-compiler@^2.0.0
#0 88.96 │   └─┬ svg-to-vue 0.7.0
#0 88.96 │     └── ✕ missing peer vue-template-compiler@^2.0.0
#0 88.96 ├─┬ babel-loader 8.2.3
#0 88.96 │ └── ✕ missing peer webpack@>=2
#0 88.96 ├─┬ nuxt-windicss 2.2.2
#0 88.96 │ ├─┬ @nuxt/kit-edge 3.0.0-rc.6-27667279.0b22079   
#0 88.96 │ │ └─┬ @nuxt/schema-edge 3.0.0-rc.6-27667279.0b22079
#0 88.96 │ │   └─┬ unimport 0.6.5
#0 88.96 │ │     └─┬ unplugin 0.8.1
#0 88.96 │ │       ├── ✕ missing peer webpack@"4 || 5"
#0 88.96 │ │       └── ✕ missing peer vite@"^2.3.0 || ^3.0.0-0"
#0 88.96 │ └─┬ vite-plugin-windicss 1.6.1
#0 88.96 │   └── ✕ missing peer vite@^2.0.1
#0 88.96 ├─┬ sass-loader 10.2.0
#0 88.96 │ └── ✕ missing peer webpack@"^4.36.0 || ^5.0.0"   
#0 88.96 ├─┬ worker-loader 3.0.8
#0 88.96 │ └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
#0 88.96 ├─┬ @nuxtjs/composition-api 0.31.0
#0 88.96 │ ├── ✕ missing peer vue@^2
#0 88.96 │ ├── ✕ missing peer @nuxt/vue-app@^2.15
#0 88.96 │ └─┬ unplugin-vue2-script-setup 0.7.3
#0 88.96 │   └─┬ unplugin 0.2.21
#0 88.96 │     ├── ✕ missing peer webpack@"4 || 5"
#0 88.96 │     └── ✕ missing peer vite@^2.3.0
#0 88.96 ├─┬ @vue/test-utils 1.3.0
#0 88.96 │ ├── ✕ missing peer vue-template-compiler@^2.x
#0 88.96 │ └── ✕ missing peer vue@2.x
#0 88.96 ├─┬ vue-jest 3.0.7
#0 88.96 │ ├── ✕ missing peer vue-template-compiler@^2.x
#0 88.96 │ └── ✕ missing peer vue@^2.x
#0 88.96 ├─┬ vue-template-babel-compiler 1.1.2
#0 88.96 │ └── ✕ missing peer vue-template-compiler@^2.6.0  
#0 88.96 ├─┬ @nuxtjs/eslint-config-typescript 8.0.0
#0 88.96 │ ├─┬ eslint-import-resolver-typescript 2.5.0
#0 88.96 │ │ └── ✕ missing peer eslint-plugin-import@"*"
#0 88.96 │ └─┬ @nuxtjs/eslint-config 8.0.0
#0 88.96 │   ├─┬ eslint-config-standard 16.0.3
#0 88.96 │   │ └── ✕ unmet peer eslint@^7.12.1: found 8.7.0 
#0 88.96 │   └─┬ eslint-plugin-promise 5.1.1
#0 88.96 │     └── ✕ unmet peer eslint@^7.0.0: found 8.7.0  
#0 88.96 ├─┬ @vue/composition-api 1.4.4
#0 88.96 │ └── ✕ missing peer vue@">= 2.5 < 3"
#0 88.96 ├─┬ vue-tippy 4.13.0
#0 88.96 │ └── ✕ missing peer vue@^2.5.9
#0 88.96 ├─┬ stylelint-config-standard-scss 3.0.0
#0 88.96 │ └─┬ stylelint-config-recommended-scss 5.0.2
#0 88.96 │   └─┬ postcss-scss 4.0.2
#0 88.96 │     └── ✕ missing peer postcss@^8.3.3
#0 88.96 ├─┬ httpsnippet 2.0.0
#0 88.96 │ └─┬ fs-writefile-promise 1.0.3
#0 88.96 │   └─┬ mkdirp-promise 1.1.0
#0 88.96 │     └── ✕ missing peer mkdirp@>=0.5.0
#0 88.96 └─┬ nuxt 2.15.8
#0 88.96   ├─┬ @nuxt/components 2.2.1
#0 88.96   │ └── ✕ missing peer consola@"*"
#0 88.96   └─┬ @nuxt/builder 2.15.8
#0 88.96     └─┬ @nuxt/webpack 2.15.8
#0 88.96       └─┬ vue-loader 15.9.8
#0 88.96         └─┬ @vue/component-compiler-utils 3.3.0
#0 88.96           └─┬ consolidate 0.15.1
#0 88.96             ├── ✕ unmet peer mustache@^3.0.0: found 4.2.0
#0 88.96             └── ✕ unmet peer babel-core@^6.26.3: found 7.0.0-bridge.0
#0 88.96 Peer dependencies that should be installed:
#0 88.96   @nuxt/vue-app@^2.15
#0 88.96   consola@"*"
#0 88.96   eslint-plugin-import@"*"
#0 88.96   mkdirp@>=0.5.0
#0 88.96   postcss@^8.3.3
#0 88.96   vite@">=2.3.0 <3.0.0 || >=3.0.0-0 <3.0.0"
#0 88.96   vue-template-compiler@">=2.6.0 <3.0.0"
#0 88.96   vue@">=2.5.9 <3.0.0"
#0 88.96   webpack@">=4.36.0 <5.0.0 || >=5.0.0 <6.0.0"
#0 88.96
#0 88.96 hint: If you want peer dependencies to be automatically installed, add "auto-install-peers=true" to an .npmrc file at the root of your project.
#0 88.96 hint: If you don't want pnpm to fail on peer dependency issues, add "strict-peer-dependencies=false" to an .npmrc file at the root of your project.
#0 88.96
------
failed to solve: executor failed running [/bin/sh -c pnpm i --unsafe-perm=true]: exit code: 1

Any ideas ? Already tried auto-install-peers=truein .npmrc.

[jerbob92]

Did you apply the changes to the latest version of hoppscotch frontend? Or did you use my branch directly?

[schniggie]

used exactly your branch

[jerbob92]

I have just updated to branch to match the current main branch op hoppscotch, it still doesn't work though in the Docker build (does work locally), not sure what changed. You can run pnpm config set strict-peer-dependencies false to fix it.

The env variables changed a bit due to the merge, it's now BACKEND_GQL_URL and BACKEND_WS_URL.

[schniggie]

Thank you, finally I could run the docker image by adding RUN pnpm config set strict-peer-dependencies false && pnpm i --unsafe-perm=true to the Dockerfile. How does the data persistence work? In my instance I am not able to register an account. It's obvious that the SSO providers cannot work without further enhancements, but the method by mail also fails. I just see "FirebaseError: Firebase: Error (auth/requests-from-referer-https://hoppscotch.frontend.xxx.xxx.redacted.net-are-blocked.)." as visual error.

[jerbob92]

Nice! Sorry, there is no full blown setup guide yet, but honestly Hoppscotch was quite disappointing to me so I'm not really using it. You need to configure a few things to make it work:

• Under Authentication -> Sign-in method you need to click Add new provider and add Email/Password. Under Authentication -> Settings -> Authorized domains you need to add the domain you're using for the frontend.
• Under Firestore Database -> Rules you need to add these rules

[schniggie]

Thanks it works now :-) I am open for alternatives.

[jerbob92]

Could not find any good alternatives that came close to Postman sadly. If Hoppscotch could do a bit more, like sharing variables and creating settings on folders (like auth things, so that you don't have to repeat it on every request), it would already be way better, but I keep coming back to Postman.

[jerbob92]

@schniggie just wanted to let you know that they have implemented "Team Environments" now, I have also implemented it in the backend :)

[schniggie]

@schniggie just wanted to let you know that they have implemented "Team Environments" now, I have also implemented it in the backend :)

Awesome thank you so much :)