[PR #5609] [MERGED] feat: mock server feature enhancements #5278

New issue

Closed

opened 2026-03-17 02:44:27 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:44:27 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5609
Author: @anwarulislam
Created: 11/24/2025
Status: ✅ Merged
Merged: 11/25/2025
Merged by: @jamesgeorge007

Base: next ← Head: feat/mock-server-starter

📝 Commits (10+)

fe5f96b feat(mock-server): add environment variable management for mock URLs
30b88ea feat(common): add messages for creating example collections in environment
7271d9c feat(mock-server): add Pet Store example collection with CRUD requests
ed46dbf feat(mock-server): add toggle for creating example collection in mock server setup
02bd394 feat(mock-server): add Hoppscotch API Mock example with CRUD operations
538d2c0 feat(mock-server): add comprehensive Hoppscotch API Mock example with CRUD operations
c84ec8e feat(mock-server): add hint for enabling example collection toggle in new collection mode
91ace9e feat(mock-server): add hint for new collection name in mock server setup
c4b66f8 feat(mock-server): add hints for existing and new collections in mock server setup
d860219 feat(mock-server): implement new mock server configuration and creation modals

📊 Changes

16 files changed (+2005 additions, -623 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+14 -1)
📝 packages/hoppscotch-common/src/components.d.ts (+7 -0)
📝 packages/hoppscotch-common/src/components/collections/ImportExport.vue (+3 -48)
📝 packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue (+2 -23)
📝 packages/hoppscotch-common/src/components/collections/index.vue (+1 -1)
➕ packages/hoppscotch-common/src/components/mockServer/ConfigureMockServerModal.vue (+313 -0)
➖ packages/hoppscotch-common/src/components/mockServer/CreateMockServer.vue (+0 -543)
➕ packages/hoppscotch-common/src/components/mockServer/CreateNewMockServerModal.vue (+548 -0)
➕ packages/hoppscotch-common/src/components/mockServer/MockServerCreatedInfo.vue (+93 -0)
📝 packages/hoppscotch-common/src/components/mockServer/MockServerDashboard.vue (+1 -7)
➕ packages/hoppscotch-common/src/composables/useMockServer.ts (+302 -0)
➕ packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateRESTRootUserCollection.graphql (+8 -0)
➕ packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateRESTUserRequest.graphql (+15 -0)
📝 packages/hoppscotch-common/src/helpers/collection/collection.ts (+28 -0)
➕ packages/hoppscotch-common/src/helpers/mockServer/exampleCollection.ts (+327 -0)
➕ packages/hoppscotch-common/src/helpers/mockServer/exampleMockCollection.ts (+343 -0)

📄 Description

Closes FE-1057

This PR Introduce management for mock URLs through environment variables, enhance user experience with messages for creating example collections, and add a Pet Store example collection featuring CRUD requests.

Summary by cubic

Adds automatic environment variable setup, a streamlined existing/new collection flow, and an optional Pet Store example to speed up mock server setup. Introduces creation and configuration modals with start/stop controls and copyable URLs.

New Features
- “Set in environment” toggle adds the mock server URL as mockUrl in the current environment, or creates a new one. Works in personal and team workspaces.
- New creation modal: choose an existing collection or create a new one, with clear hints. In “new” mode, enable the example toggle to proceed.
- “Create example collection” generates a Pet Store collection (GET, POST, PUT, DELETE) using the <> variable.
- After creation and in the configure modal, view path-based and subdomain-based URLs, copy them, and start/stop the server.

^{Written for commit d71bc5e52d. Summary will update automatically on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5609 **Author:** [@anwarulislam](https://github.com/anwarulislam) **Created:** 11/24/2025 **Status:** ✅ Merged **Merged:** 11/25/2025 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `feat/mock-server-starter` --- ### 📝 Commits (10+) - [`fe5f96b`](https://github.com/hoppscotch/hoppscotch/commit/fe5f96b00883d7713e6c7363f5fee45729b17b69) feat(mock-server): add environment variable management for mock URLs - [`30b88ea`](https://github.com/hoppscotch/hoppscotch/commit/30b88eaa82a969ea5cb7e095df7ee3d916f82ce3) feat(common): add messages for creating example collections in environment - [`7271d9c`](https://github.com/hoppscotch/hoppscotch/commit/7271d9c098cb8bd255e3fa6f00465dc87fd2e3b3) feat(mock-server): add Pet Store example collection with CRUD requests - [`ed46dbf`](https://github.com/hoppscotch/hoppscotch/commit/ed46dbf076b875a0d679f99714dc09922ca01406) feat(mock-server): add toggle for creating example collection in mock server setup - [`02bd394`](https://github.com/hoppscotch/hoppscotch/commit/02bd3947d1a1c363c9afc3d371f228cf7e3272a4) feat(mock-server): add Hoppscotch API Mock example with CRUD operations - [`538d2c0`](https://github.com/hoppscotch/hoppscotch/commit/538d2c0f48ae12e9ffb02ab0d2f0eabdd710de91) feat(mock-server): add comprehensive Hoppscotch API Mock example with CRUD operations - [`c84ec8e`](https://github.com/hoppscotch/hoppscotch/commit/c84ec8effb21bcb3f31a205ab368468e7a34e8fb) feat(mock-server): add hint for enabling example collection toggle in new collection mode - [`91ace9e`](https://github.com/hoppscotch/hoppscotch/commit/91ace9e2f1014c28567eb03c3503aebc2092e528) feat(mock-server): add hint for new collection name in mock server setup - [`c4b66f8`](https://github.com/hoppscotch/hoppscotch/commit/c4b66f8cb86932b235f6817869018fd5902deb16) feat(mock-server): add hints for existing and new collections in mock server setup - [`d860219`](https://github.com/hoppscotch/hoppscotch/commit/d860219c5625a17b9b72f12ad81dd4686f6d45db) feat(mock-server): implement new mock server configuration and creation modals ### 📊 Changes **16 files changed** (+2005 additions, -623 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+14 -1) 📝 `packages/hoppscotch-common/src/components.d.ts` (+7 -0) 📝 `packages/hoppscotch-common/src/components/collections/ImportExport.vue` (+3 -48) 📝 `packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue` (+2 -23) 📝 `packages/hoppscotch-common/src/components/collections/index.vue` (+1 -1) ➕ `packages/hoppscotch-common/src/components/mockServer/ConfigureMockServerModal.vue` (+313 -0) ➖ `packages/hoppscotch-common/src/components/mockServer/CreateMockServer.vue` (+0 -543) ➕ `packages/hoppscotch-common/src/components/mockServer/CreateNewMockServerModal.vue` (+548 -0) ➕ `packages/hoppscotch-common/src/components/mockServer/MockServerCreatedInfo.vue` (+93 -0) 📝 `packages/hoppscotch-common/src/components/mockServer/MockServerDashboard.vue` (+1 -7) ➕ `packages/hoppscotch-common/src/composables/useMockServer.ts` (+302 -0) ➕ `packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateRESTRootUserCollection.graphql` (+8 -0) ➕ `packages/hoppscotch-common/src/helpers/backend/gql/mutations/CreateRESTUserRequest.graphql` (+15 -0) 📝 `packages/hoppscotch-common/src/helpers/collection/collection.ts` (+28 -0) ➕ `packages/hoppscotch-common/src/helpers/mockServer/exampleCollection.ts` (+327 -0) ➕ `packages/hoppscotch-common/src/helpers/mockServer/exampleMockCollection.ts` (+343 -0) </details> ### 📄 Description Closes FE-1057 This PR Introduce management for mock URLs through environment variables, enhance user experience with messages for creating example collections, and add a Pet Store example collection featuring CRUD requests.  --- ## Summary by cubic Adds automatic environment variable setup, a streamlined existing/new collection flow, and an optional Pet Store example to speed up mock server setup. Introduces creation and configuration modals with start/stop controls and copyable URLs. - **New Features** - “Set in environment” toggle adds the mock server URL as mockUrl in the current environment, or creates a new one. Works in personal and team workspaces. - New creation modal: choose an existing collection or create a new one, with clear hints. In “new” mode, enable the example toggle to proceed. - “Create example collection” generates a Pet Store collection (GET, POST, PUT, DELETE) using the <<mockUrl>> variable. - After creation and in the configure modal, view path-based and subdomain-based URLs, copy them, and start/stop the server. <sup>Written for commit d71bc5e52d3a93263c0064470cb2e319df9cd238. Summary will update automatically on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>