How-To: Connect MediaPlanner Frontend to Backend

1. Clone the MediaPlanner Repos

• Clone the frontend repo:

  CODE

  $ git clone <repo-url> alli-frontend-media-planner
  alli-frontend-media-planner$ npm install

• Ensure the file alli-frontend-media-planner.js exists in the src folder.

• Clone the backend repo:

  CODE

  git clone <repo-url> alli-mediaplanner-backend
  alli-mediaplanner-backend$ npm install

2. Enable Import Overrides in Chrome

Enable the Import Overrides UI:

1. Open DevTools > Application > Local Storage.

2. Set the key import-overrides-ui to true.

3. Refresh the browser page.

Add Import Override:

1. Open the Overrides UI Window (at the bottom of Chrome DevTools).

2. Click “Add override”.

3. Select the module @alli/frontend-media-planner.

4. In the modal, enter the override URL:

   CODE

   https://localhost:8081/alli-frontend-media-planner.js

5. Click “Apply override”.

3. Set Up the Backend

Update CORS Settings in Backend:

• In alli-mediaplanner-backend/app/index.js, change:

  CODE

  - origin: CORS_ALLOWED_ORIGINS,
  + origin: "*",

Start Backend Server:

1. Open a terminal (VSCode's Run and Debug “JavaScript Debug Terminal” is recommended for debugging).

2. Run:

   CODE

   alli-mediaplanner-backend$ aws-vault exec datawarehouse -- bin/dev/serve

3. In the terminal output, look for a line like:

   CODE

   "message": "Media Planner Listening on port:  8079"

   Note the port number.

4. Point Frontend to Backend

• In the frontend repo src/redux-toolkit/types.js, update:

  CODE

  - export const MEDIA_PLAN_DOMAIN = `https://mediaplanner.${process.env.ALLI_DOMAIN}/api`; // eslint-disable-line no-undef
  + export const MEDIA_PLAN_DOMAIN = `http://localhost:8079/api`;
  

• Start the frontend app

alli-frontend-media-planner$ npm run start

5. Verify Setup

• Open browser and go to the staging URL:

  CODE

  https://app.allistaging.com/client/demo_client/planning/media-planner/

• Hit refresh. Everything should now be routed to your frontend and your backend.

• After you are done testing, and want to connect to real staging environment - Remove the override (ie. Click “Disable override” in Import Overrides UI) and refresh page.