others-Guide of installing hoppscotch app
1. Purpose
In this post, I would demo how to install the hoppscotch app in macos. And I would try to demo how to solve the installation problems I encountered when I tried to install the app.
2. Environement
- OS: MacOs 10.15
- NodeJS version: Node.js v17.1.0
- npm version:
{
npm: '8.1.2',
node: '17.1.0',
v8: '9.5.172.25-node.13',
uv: '1.42.0',
zlib: '1.2.11',
brotli: '1.0.9',
ares: '1.18.1',
modules: '102',
nghttp2: '1.45.1',
napi: '8',
llhttp: '6.0.4',
openssl: '3.0.0+quic',
cldr: '39.0',
icu: '69.1',
tz: '2021a',
unicode: '13.0',
ngtcp2: '0.1.0-DEV',
nghttp3: '0.1.0-DEV'
}
3. Solution
3.1 What is hoppscotch app?
Hoppscotch is just a tool that helps you create http/https requests faster, saving precious time on development.
Hoppscotch is light-weight, web based API development suite. It was built from ground up with ease of use and accessibility in mind providing all the functionality needed for API developers with minimalist, unobtrusive UI. It is free-to-use and as an added perk completely Open Source!
The author of hoppscotch(Liyas Thomas) write an article about why he creates the app. He wrote:
The story behind Hoppscotch: The very first task I was assigned is an API integration of an old project. That’s when I came across Postman API testing tool. Postman has separate builds targeted to each operating system made with Electron. I use a low-end PC and can’t possibly afford to run another Electron app. From that moment onwards, I wanted to make an API testing platform which is:
- Open Sourced 💚
- Runs online
- Have multi-platform support
- Have multi-device support
- Accessible from anywhere
3.2 Why do I want to install this app?
Because I am tired of using postman , I want something new and open source,and it can :
- Send requests to verify your API is ready for launch GET, PUT, POST, DELETE, OPTIONS (more coming soon)
- Authentication support
- Parameters support
- Request body support
- View Response
- Progressive Web App support
3.3 Some basic/background knowledge needed to learn to do this job
3.3.1 pnpm
pnpm
pnpm is an alternative package manager for Node.js. It is a drop-in replacement for npm, but faster and more efficient.
The main benefit of pnpm is the disk-saving technology that it uses:
pnpm uses a content-addressable filesystem to store all files from all module directories on a disk. When using npm or Yarn, if you have 100 projects using lodash, you will have 100 copies of lodash on disk. With pnpm, lodash will be stored in a content-addressable storage, so:
- If you depend on different versions of lodash, only the files that differ are added to the store. If lodash has 100 files, and a new version has a change only in one of those files,
pnpm updatewill only add 1 new file to the storage.- All the files are saved in a single place on the disk. When packages are installed, their files are linked from that single place consuming no additional disk space. Linking is performed using either hard-links or reflinks (copy-on-write).
As a result, you save gigabytes of space on your disk and you have a lot faster installations! If you’d like more details about the unique
node_modulesstructure that pnpm creates and why it works fine with the Node.js ecosystem, read this small article: Flat node_modules is not the only way.
You can install pnpm using npm as follows:
npm install -g pnpm
Or install from scratch(no npm installed):
curl -fsSL https://get.pnpm.io/install.sh | sh -
Usage of pnpm(As opposed to npm):
3.4 The installation process and the problem/errors I encountered
3.4.1 Download source code
You can download it from its github repository: https://github.com/hoppscotch/hoppscotch , here is the command:
git clone https://github.com/hoppscotch/hoppscotch.git
After download, you get this directory structure:
➜ hoppscotch tree -d ./hoppscotch -L 1
./hoppscotch
├── node_modules
└── packages
2 directories
3.4.2 build from source code
Now we can use pnpm to install the dependencies of hoppscotch.
First we need to install pnpm(Read more about pnpm) :
npm install -g pnpm
Then we can use it to install hoppscotch dependencies (Execute it inside root direcotry of hoppscotch ):
pnpm install
3.4.3 generate the release package
After installing the dependencies , we can build the app now:
$ pnpm run build
│ > @hoppscotch/[email protected] build /Users/bswen/Downloads/hoppscotch/
│ > npx tsc
└─ Done in 6.8s
packages/hoppscotch-app do-build-prod$ pnpm run generate
│ > [email protected] generate /Users/bswen/Downloads/hoppscotch/hopps
│ > nuxt generate --modern
│ WARN No .env file found in /Users/bswen/Downloads/hoppscotch/hoppscot
│ WARN Modules should be only specified once: unplugin-vue2-script-setup/nux
│ ℹ Production build
│ ℹ Bundling only for client side
│ ℹ Target: static
│ ℹ Using components loader to optimize imports
│ ℹ Discovered Components: node_modules/.cache/nuxt/components/readme.md
│ ✔ Builder initialized
│ ✔ Nuxt files generated
│ ℹ Compiling Client
│ ERROR Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:130:10)
│ at module.exports (/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1
│ at NormalModule._initBuildHash (/Users/bswen/Downloads/hoppscotch/h
│ at handleParseError (/Users/bswen/Downloads/hoppscotch/hoppscotch-2
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at iterateNormalLoaders (/Users/bswen/Downloads/hoppscotch/hoppscot
│ at iterateNormalLoaders (/Users/bswen/Downloads/hoppscotch/hoppscot
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at runSyncOrAsync (/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1
│ at iterateNormalLoaders (/Users/bswen/Downloads/hoppscotch/hoppscot
│ at Array.<anonymous> (/Users/bswen/Downloads/hoppscotch/hoppscotch-
│ at Storage.finished (/Users/bswen/Downloads/hoppscotch/hoppscotch-2
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ ERROR error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:130:10)
│ at module.exports (/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0
│ at NormalModule._initBuildHash (/Users/bswen/Downloads/hoppscotch/hop
│ at handleParseError (/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.p
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.p
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.p
│ at iterateNormalLoaders (/Users/bswen/Downloads/hoppscotch/hoppscotch
│ at iterateNormalLoaders (/Users/bswen/Downloads/hoppscotch/hoppscotch
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.p
│ at context.callback (/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.p
│ /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.pnpm/l
│ throw e;
│ ^
│ Error: error:0308010C:digital envelope routines::unsupported
│ at new Hash (node:internal/crypto/hash:67:19)
│ at Object.createHash (node:crypto:130:10)
│ at module.exports (/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1
│ at NormalModule._initBuildHash (/Users/bswen/Downloads/hoppscotch/h
│ at handleParseError (/Users/bswen/Downloads/hoppscotch/hoppscotch-2
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at iterateNormalLoaders (/Users/bswen/Downloads/hoppscotch/hoppscot
│ at iterateNormalLoaders (/Users/bswen/Downloads/hoppscotch/hoppscot
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at context.callback (/Users/bswen/Downloads/hoppscotch/hoppscotch-2
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/
│ at FSReqCallback.oncomplete (node:fs:188:23) {
│ opensslErrorStack: [ 'error:03000086:digital envelope routines::initializa
│ library: 'digital envelope routines',
│ reason: 'unsupported',
│ code: 'ERR_OSSL_EVP_UNSUPPORTED'
│ }
│ Node.js v17.1.0
│ ELIFECYCLE Command failed with exit code 1.
└─ Failed in 19.3s
/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/packages/hoppscotch-app:
ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL [email protected] do-build-prod: `pnpm run generate`
Exit status 1
ELIFECYCLE Command failed with exit code 1.
The core error message is:
ERROR Error: error:0308010C:digital envelope routines::unsupported
After searching, I found that this error is caused by the incompatibility of the installation process and the https/ssl verification. So I do this:
➜ hoppscotch-2.1.0 export NODE_OPTIONS=--openssl-legacy-provider
According to the nodejs document, this option is used to:
--openssl-legacy-provider#Added in: v17.0.0
Enable OpenSSL 3.0 legacy provider. For more information please see OSSL_PROVIDER-legacy.
Now run the build command again:
➜ hoppscotch-2.1.0 pnpm run generate
> [email protected] generate /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0
> pnpm -r do-build-prod
Scope: all 3 workspace projects
packages/hoppscotch-js-sandbox do-build-prod$ pnpm run build
│ > @hoppscotch/[email protected] build /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/packages/hopp
│ > npx tsc
└─ Done in 5.9s
packages/hoppscotch-app do-build-prod$ pnpm run generate
│ > [email protected] generate /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/packages/hoppscotc
│ > nuxt generate --modern
│ WARN No .env file found in /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/packages/hoppscotch-a
│ WARN Modules should be only specified once: unplugin-vue2-script-setup/nuxt
│ ℹ Production build
│ ℹ Bundling only for client side
│ ℹ Target: static
│ ℹ Using components loader to optimize imports
│ ℹ Discovered Components: node_modules/.cache/nuxt/components/readme.md
│ ✔ Builder initialized
│ ✔ Nuxt files generated
│ ℹ Compiling Client
│ ERROR [BABEL] Note: The code generator has deoptimised the styling of /Users/bswen/Downloads/hoppsc
│ ERROR [BABEL] Note: The code generator has deoptimised the styling of /Users/bswen/Downloads/hoppsc
│ ✔ Client: Compiled successfully in 1.26m
│ ℹ Compiling Modern
│ ERROR [BABEL] Note: The code generator has deoptimised the styling of /Users/bswen/Downloads/hoppsc
│ ERROR [BABEL] Note: The code generator has deoptimised the styling of /Users/bswen/Downloads/hoppsc
│ ✔ Modern: Compiled successfully in 1.06m
│ Hash: b1330a9f2967d6361eb4
│ Version: webpack 4.46.0
│ Time: 75327ms
│ Built at: 11/23/2021 11:17:54 AM
│ Asset Size
│ ../server/client.manifest.json 60.9 KiB
│ 026633b.js 7.46 KiB
│ 029f9a0.js 40.8 KiB
│ 037c3a7.js 2.77 KiB
│ .....
│ fd5acbc.worker.js 32 KiB
│ fdc132f.js 142 KiB
│ ff0c590.js 777 bytes
│ fff3096.js 14 KiB
│ + 1 hidden asset
│ Entrypoint app [big] = 754963b.js a352673.js c6ff85f.js 068d1fe.js
│ WARNING in /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.pnpm/[email protected]/
│ Critical dependency: the request of a dependency is an expression
│ @ ./helpers/curlparser.ts
│ @ /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.pnpm/[email protected].
│ @ ./components/http/ImportCurl.vue?vue&type=script&lang=ts&
│ @ ./components/http/ImportCurl.vue
│ @ ./node_modules/.cache/nuxt/components/index.js
│ @ ./node_modules/.cache/nuxt/components/plugin.js
│ @ ./node_modules/.cache/nuxt/index.js
│ @ ./node_modules/.cache/nuxt/client.js
│ @ multi /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.pnpm/@[email protected]
│ WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
│ This can impact web performance.
│ Assets:
│ 3804ee4.js (441 KiB)
│ 068d1fe.js (428 KiB)
│ a352673.js (248 KiB)
│ f6adfe7.js (353 KiB)
│ 70c6fda.js (1.3 MiB)
│ 4b6b14a.js (402 KiB)
│ 13676bc.js (1.92 MiB)
│ c6ff85f.js (1.1 MiB)
│ WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended
│ Entrypoints:
│ app (1.76 MiB)
│ 754963b.js
│ a352673.js
│ c6ff85f.js
│ 068d1fe.js
│
│ Hash: 59b3d54356a5ed443ae9
│ Version: webpack 4.46.0
│ Time: 63873ms
│ Built at: 11/23/2021 11:18:58 AM
│ Asset Size
│ ../server/modern.manifest.json 60.5 KiB
│
│ 1735f33.modern.js 43.2 KiB
│ 1a93978.modern.js 39.9 KiB
│ 1b89a41.modern.js 940 bytes
│ ......
│ f52d88c.modern.js 4.6 KiB
│ f61d836.modern.js 12.7 KiB
│ f6f7bb7.modern.js 26.6 KiB
│ f9a007f.modern.js 1010 bytes
│ fb60cb1.modern.js 2.78 KiB
│ fe8bd15.modern.js 21.8 KiB
│ + 1 hidden asset
│ Entrypoint app [big] = 43030c1.modern.js ab5b9d2.modern.js 5b912c0.modern.js 1ca25e5.modern.js
│ WARNING in /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.pnpm/[email protected]/
│ Critical dependency: the request of a dependency is an expression
│ @ ./helpers/curlparser.ts
│ @ /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.pnpm/[email protected].
│ @ ./components/http/ImportCurl.vue?vue&type=script&lang=ts&
│ @ ./components/http/ImportCurl.vue
│ @ ./node_modules/.cache/nuxt/components/index.js
│ @ ./node_modules/.cache/nuxt/components/plugin.js
│ @ ./node_modules/.cache/nuxt/index.js
│ @ ./node_modules/.cache/nuxt/client.js
│ @ multi /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/node_modules/.pnpm/@[email protected]
│ WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
│ This can impact web performance.
│ Assets:
│ 0184baf.modern.js (442 KiB)
│ 1ca25e5.modern.js (405 KiB)
│ 231f202.modern.js (331 KiB)
│ 8489405.modern.js (1.27 MiB)
│ 02019ce.modern.js (380 KiB)
│ 55f3515.modern.js (1.89 MiB)
│ 5b912c0.modern.js (1.07 MiB)
│ WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended
│ Entrypoints:
│ app (1.68 MiB)
│ 43030c1.modern.js
│ ab5b9d2.modern.js
│ 5b912c0.modern.js
│ 1ca25e5.modern.js
│
│ WARN No .env file found in /Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/packages/hoppscotch-a
│ WARN Modules should be only specified once: unplugin-vue2-script-setup/nuxt
│ ℹ Generating pages
│ ✔ Generated route "/ar"
│ ✔ Generated route "/cs"
│ ✔......
│ ✔ Generated route "/sr/realtime"
│ ✔ Generated route "/vi/join-team"
│ ✔ Generated route "/vi/settings"
│ ✔ Generated route "/tw/settings"
│ ✔ Generated route "/"
│ ✔ Client-side fallback created: 404.html
│ ℹ Generating sitemaps
│ FATAL [sitemap-module] The hostname option is mandatory in your config on spa or generate build mode
│ {
│ "path": "/sitemap.xml",
│ "exclude": [],
│ "routes": [],
│ "cacheTime": 900000,
│ "etag": {
│ "weak": false
│ },
│ "gzip": false,
│ "trailingSlash": false,
│ "defaults": {},
│ "pathGzip": "/sitemap.xml"
│ }
│ ╭──────────────────────────────────────────────────────────────────────────────╮│
│ ELIFECYCLE Command failed with exit code 1.
└─ Failed in 2m 31.7s
/Users/bswen/Downloads/hoppscotch/hoppscotch-2.1.0/packages/hoppscotch-app:
ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL [email protected] do-build-prod: `pnpm run generate`
Exit status 1
ELIFECYCLE Command failed with exit code 1.
➜ hoppscotch-2.1.0
It failed again, the core error message is:
FATAL [sitemap-module] The hostname option is mandatory in your config on spa or generate build mode
After searching, I found this answer from liyasthomas :
This seems like an issue of not having a
.envfile inpackages/hoppscotch-appdirectory.Rename the default
.env.examplefile found inpackages/hoppscotch-appto.envand run the generate command again.For self-hosting, you can provide your own environment keys in
.env.Let me know if this doesn’t fix your issue.
So I do this:
➜ hoppscotch git:(main) cd packages
➜ packages git:(main) cd hoppscotch-app
➜ hoppscotch-app git:(main) cp .env.example .env
Then run the build command again:
➜ hoppscotch-2.1.0 pnpm run generate
It succeeded! We got a dist directory:
➜ hoppscotch-app git:(main) tree -d ./dist -L 1
./dist
├── _nuxt
├── af
├── ar
├── ca
├── cn
├── cs
├── da
├── de
├── documentation
├── el
├── enter
├── es
├── fi
├── fr
├── graphql
├── he
├── hu
├── images
├── it
├── ja
├── join-team
├── ko
├── nl
├── no
├── pl
├── profile
├── pt
├── pt-br
├── realtime
├── ro
├── ru
├── settings
├── sr
├── sv
├── tr
├── tw
├── uk
└── vi
3.4.4 Start the app
Now we can start hoppscotch app as follows:
➜ hoppscotch-app git:(main) pwd
/Users/bswen/Downloads/hoppscotch/hoppscotch
➜ hoppscotch git:(main) pnpm run dev
> [email protected] dev /Users/bswen/Downloads/hoppscotch/hoppscotch
> pnpm -r do-dev
Scope: all 4 workspace projects
packages/hoppscotch-app do-dev$ pnpm run dev
[124 lines collapsed]
│ [dev:nuxt ] WARN Compiled with 1 warnings
│ [dev:nuxt ]
│ [dev:nuxt ]
│ [dev:nuxt ] WARN in /Users/bswen/Downloads/hoppscotch/hoppscotch/node_modules/.pnpm/[email protected]/node_modules/yargs-parser/build/lib/index.js
│ [dev:nuxt ]
│ [dev:nuxt ] Critical dependency: the request of a dependency is an expression
│ [dev:nuxt ]
│ [dev:nuxt ] ℹ Waiting for file changes
│ [dev:nuxt ] ℹ Memory usage: 608 MB (RSS: 1.15 GB)
│ [dev:nuxt ] ℹ Listening on: http://10.28.145.223:3000/
└─ Running...
3.5 The success
Now let’s try the app , send a http request to test it. Let’s open a browser and goto : http://localhost:3000, we get this:
It works!
4. Summary
In this post, I demonstrated how to install hoppscotch app and how to resovle issues when installing it. That’s it, thanks for your reading.