pkp/pkp-lib#10134 Add option to access ojs via storybook proxy to use…

… real API

.storybook/main.js

@@ -18,5 +18,21 @@ const config = {
 		autodocs: 'tag',
 	},
 	staticDirs: ['../public', './public', '../src/docs'],
+	previewHead: (head) => {
+		/** Remove the https://mock from the api url to use relative url which is proxied to real api server via middleware.js */
+		if (process.env.STORYBOOK_APP_DOMAIN_URL) {
+			const apiBaseUrlReplacement = `
+			<script>
+			  pkp.context.apiBaseUrl = pkp.context.apiBaseUrl.replace(
+				'https://mock',
+				'',
+				);
+			</script>
+			`;
+			return `${head}${apiBaseUrlReplacement}`;
+		}
+
+		return head;
+	},
 };
 export default config;

.storybook/middleware.js

@@ -1,11 +1,15 @@
 const {createProxyMiddleware} = require('http-proxy-middleware');
-
 module.exports = function expressMiddleware(router) {
-	router.use(
-		'/index.php', // This is the API prefix that you want to proxy
-		createProxyMiddleware({
-			target: 'http://localhost:7003', // The backend server you want to proxy to
-			changeOrigin: true,
-		}),
-	);
+	if (process.env.STORYBOOK_APP_DOMAIN_URL) {
+		router.use(
+			'/index.php', // This is the API prefix that you want to proxy
+			createProxyMiddleware({
+				target: process.env.STORYBOOK_APP_DOMAIN_URL, // The backend server you want to proxy to
+				changeOrigin: true,
+				//pathRewrite: {
+				//'^/index.php': '', // Rewrites the URL removing /api prefix before sending to the backend server
+				//},
+			}),
+		);
+	}
 };

package.json

@@ -7,6 +7,7 @@
     "format": "prettier --write ./src",
     "prepare": "husky install",
     "storybook": "storybook dev -p 6006",
+    "storybookWithProxy": "STORYBOOK_APP_DOMAIN_URL=http://localhost:7001 storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token chpt_d560551f1e4c0c7",
     "test": "vitest"

public/globals.js

@@ -25,7 +25,7 @@ window.pkp = {
 	 *
 	 */
 	context: {
-		apiBaseUrl: '/index.php/publicknowledge/api/v1/',
+		apiBaseUrl: 'https://mock/index.php/publicknowledge/api/v1/',
 		pageBaseUrl: 'https://mock/index.php/publicknowledge/',
 	},
 	/**

src/docs/guide/APIMocking.mdx

@@ -0,0 +1,23 @@
+import {Meta} from '@storybook/blocks';
+
+<Meta title="Guide/API Mocking" />
+
+# API Mocking
+
+Everything that run in storybook runs indepdendently from our PHP server. Therefore any interactions with API needs to be mocked. Good example how this can be achieved with [MSW](https://mswjs.io) library can be found in `ExamplePage.stories.js` file.
+
+## API interactions with real PHP backend
+
+In case the component/page is implemented in isolation and new API is being created - its possible to point storybook to use this real API for testing purposes.
+
+To overcome CORS challenges its achieved by adding simple proxy to storybook (`./storybook/middleware.js`).
+
+Assuming that you run ojs/omp/ops via php development server (`php -S localhost:7001`), you can run storybook with alternative command:
+
+`npm run storybookWithProxy`
+
+Or if you want to customise the port, you can run it directly with following command
+
+`STORYBOOK_APP_DOMAIN_URL=http://localhost:7878 npm run storybook`
+
+As result you will be able to access your instance via storybook url (`http://localhost:6006/index.php/publicknowledge/en/login`) and for example to login to create new session, which will than be used by the page/component in storybook as well.