diff --git a/package.json b/package.json
index c5412f5855..4d3d678690 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
   "version": "1.0.0",
   "devDependencies": {
     "@spotify/eslint-config-oss": "^1.0.1",
+    "file-loader": "^6.0.0",
     "husky": "^4.2.3",
     "identity-obj-proxy": "^3.0.0",
     "lerna": "^3.20.2",
diff --git a/packages/app/package.json b/packages/app/package.json
index f55594ce8e..adf8e9675e 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -64,5 +64,12 @@
       "last 1 safari version"
     ]
   },
-  "license": "Apache-2.0"
+  "license": "Apache-2.0",
+  "proxy": {
+      "/circleci/api": {
+        "target": "https://circleci.com/api/v1.1",
+        "changeOrigin": true,
+        "pathRewrite": {"^/circleci/api/": "/"}
+      }
+    }
 }
diff --git a/packages/cli/src/commands/app/serve.ts b/packages/cli/src/commands/app/serve.ts
index 182e338287..58e9e5fc16 100644
--- a/packages/cli/src/commands/app/serve.ts
+++ b/packages/cli/src/commands/app/serve.ts
@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 
-import { serveBundle } from '../../lib/bundler';
+import fs from 'fs-extra';
 import { Command } from 'commander';
+import { serveBundle } from '../../lib/bundler';
+import { paths } from '../../lib/paths';
 
 export default async (cmd: Command) => {
+  const pkgPath = paths.resolveTarget('package.json');
+  const pkg = await fs.readJson(pkgPath);
+
   const waitForExit = await serveBundle({
     entry: 'src/index',
     checksEnabled: cmd.check,
+    proxy: pkg.proxy,
   });
 
   await waitForExit();
diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts
index 3aaf5968f5..c130c14d4a 100644
--- a/packages/cli/src/lib/bundler/server.ts
+++ b/packages/cli/src/lib/bundler/server.ts
@@ -48,6 +48,7 @@ export async function serveBundle(options: ServeOptions) {
     https: protocol === 'https',
     host,
     port,
+    proxy: options.proxy,
   });
 
   await new Promise((resolve, reject) => {
diff --git a/packages/cli/src/lib/bundler/types.ts b/packages/cli/src/lib/bundler/types.ts
index 4182226d69..5e14760574 100644
--- a/packages/cli/src/lib/bundler/types.ts
+++ b/packages/cli/src/lib/bundler/types.ts
@@ -15,6 +15,7 @@
  */
 
 import { BundlingPathsOptions } from './paths';
+import { ProxyConfigMap } from 'webpack-dev-server';
 
 export type BundlingOptions = {
   checksEnabled: boolean;
@@ -23,6 +24,7 @@ export type BundlingOptions = {
 
 export type ServeOptions = BundlingPathsOptions & {
   checksEnabled: boolean;
+  proxy?: ProxyConfigMap;
 };
 
 export type BuildOptions = BundlingPathsOptions & {
diff --git a/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
index 7dbe5ef393..021a2ced2b 100644
--- a/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
+++ b/plugins/circleci/src/pages/BuildWithStepsPage/BuildWithStepsPage.tsx
@@ -22,8 +22,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { PluginHeader } from '../../components/PluginHeader';
 import { ActionOutput } from './lib/ActionOutput/ActionOutput';
 import { Layout } from '../../components/Layout';
-import { useBuildWithSteps, useSettings } from '../../state';
 import LaunchIcon from '@material-ui/icons/Launch';
+import { useSettings } from '../../state/useSettings';
+import { useBuildWithSteps } from '../../state/useBuildWithSteps';
 
 const IconLink = IconButton as typeof Link;
 const BuildName: FC<{ build: BuildWithSteps | null }> = ({ build }) => (
diff --git a/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx b/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx
index 41001c91dd..a121822af3 100644
--- a/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx
+++ b/plugins/circleci/src/pages/BuildsPage/lib/Builds/Builds.tsx
@@ -16,7 +16,8 @@
 import React, { FC, useEffect } from 'react';
 import { CITableBuildInfo, CITable } from '../CITable';
 import { BuildSummary } from '../../../../api';
-import { useSettings, useBuilds } from '../../../../state';
+import { useBuilds } from '../../../../state/useBuilds';
+import { useSettings } from '../../../../state/useSettings';
 
 const makeReadableStatus = (status: string | undefined) => {
   if (!status) return '';
diff --git a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx
index 62b874d70e..f009b7487f 100644
--- a/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx
+++ b/plugins/circleci/src/pages/SettingsPage/SettingsPage.tsx
@@ -27,7 +27,7 @@ import { Alert } from '@material-ui/lab';
 import { InfoCard, Content } from '@backstage/core';
 import { Layout } from '../../components/Layout';
 import { PluginHeader } from '../../components/PluginHeader';
-import { useSettings } from '../../state';
+import { useSettings } from '../../state/useSettings';
 
 const SettingsPage = () => {
   const [
diff --git a/plugins/circleci/src/state/AppState.tsx b/plugins/circleci/src/state/AppState.tsx
index ecea9e5221..b4fedb6abd 100644
--- a/plugins/circleci/src/state/AppState.tsx
+++ b/plugins/circleci/src/state/AppState.tsx
@@ -15,8 +15,8 @@
  */
 import React, { FC, useReducer, Dispatch, Reducer } from 'react';
 import { circleCIApiRef } from '../api';
-import { State, Action, SettingsState } from './types';
-export { SettingsState };
+import type { SettingsState, State, Action } from './types';
+export type { SettingsState };
 import equal from 'fast-deep-equal';
 
 export const AppContext = React.createContext<[State, Dispatch<Action>]>(
diff --git a/plugins/circleci/src/state/index.ts b/plugins/circleci/src/state/index.ts
index 24db02aff4..4ef67f62ea 100644
--- a/plugins/circleci/src/state/index.ts
+++ b/plugins/circleci/src/state/index.ts
@@ -14,6 +14,3 @@
  * limitations under the License.
  */
 export * from './AppState';
-export * from './useBuildWithSteps';
-export * from './useBuilds';
-export * from './useSettings';
diff --git a/plugins/circleci/src/state/useSettings.ts b/plugins/circleci/src/state/useSettings.ts
index 34b2f5e402..c2d5714f0f 100644
--- a/plugins/circleci/src/state/useSettings.ts
+++ b/plugins/circleci/src/state/useSettings.ts
@@ -20,7 +20,6 @@ import { useApi, errorApiRef } from '@backstage/core';
 export function useSettings() {
   const [{ settings }, dispatch] = useContext(AppContext);
 
-
   const errorApi = useApi(errorApiRef);
 
   const rehydrate = () => {
diff --git a/yarn.lock b/yarn.lock
index 37e0a55af3..da6f670bef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9277,6 +9277,14 @@ file-loader@^4.2.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
+file-loader@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
 file-system-cache@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"