Updating our docs

Author: mohitkhatri89

src/content/docs/getting-started/customize.mdx

@@ -0,0 +1,114 @@
+---
+title: Deploy your starter setup
+description: Deploy your local setup to showcase its benefits.
+sidebar:
+  order: 3
+---
+
+import { SlCloudDownload, SlPencil, SlRocket, SlCloudUpload } from "react-icons/sl";
+import { FcOk } from "react-icons/fc";
+
+:::caution
+**This is a POC deployment guide!** 
+
+We are using public tooling in this guide to get something out on the internet so you can showcase your 1fe instance. If you're ready to set up a production environment with proper CDN infrastructure, CI/CD pipelines, and robust hosting, visit our [productionization guide](../../platform-guides/productionize).
+:::
+
+Now that we have setup our local 1FE app and widget starter kit, it's time to deploy our setup to showcase its benefits. This will allow us to share our work with others and demonstrate the power of 1FE. We will do the following in this guide.
+<div className="prose">
+1. **Deploy our assets to a public CDN (JSDelivr).**
+2. **Deploy our 1FE app to a hosting service.**
+</div>
+
+## <SlCloudUpload style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Deploy our assets to a CDN
+
+We have already learnt how to host assets locally in the previous guide. Let's deploy to them a CDN so our hosted 1fe instance can access them.
+
+### Setup the github repository
+
+[JSDelivr](https://www.jsdelivr.com/) works off of GitHub repositories and serves files based on Git tags. So the first step would be to create a repository for our forked cdn assets on github.com and to push our changes to that repository. We already did that as part of the guide to get out setup locally. If you haven't done that, do that now so our mock-cdn-assets are available on github.com for JSDelivr to pick up from.
+
+#### Add the 1fe instance bundle to the CDN
+When working on getting our setup to work locally, we already uploaded bundles for widget-starter-kit/bathtub to the CDN. We need to upload the shell bundle.
+
+Create a folder in forked mock-cdn-assets repository like so: `integration/shell/<pick-a-number>/js/`. Copy the bundle over your 1fe app. Bundle can be found at this location after build: `dist/public/js/bundle.js`. 
+
+### Create and Push Tags for JSDelivr
+
+Let's now create a git tag for our assets. 
+
+<div className="prose">
+1. **Create and push a Git tag - this is crucial for JSDelivr caching:**
+
+```bash
+cd mock-cdn-assets
+git add .
+git commit -m "Add widget assets for deployment"
+git tag v1.0.2
+git push origin main
+git push origin v1.0.2
+```
+
+2. **Your assets are now publicly accessible via JSDelivr URLs:**
+
+```
+# Widget Starter Kit Bundle
+https://cdn.jsdelivr.net/gh/<your-github-username>/mock-cdn-assets@v1.0.2/integration/widgets/@1fe/widget-starter-kit/<version>/js/1fe-bundle.js
+
+# Bathtub Widget Bundle  
+https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@v1.0.2/integration/widgets/@1fe/bathtub/<version>/js/1fe-bundle.js
+
+# Live Configurations
+https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@v1.0.2/integration/configs/live.json
+```
+</div>
+:::tip
+**JSDelivr not reflecting your changes?** Try purging the cache at https://www.jsdelivr.com/tools/purge. Changes typically appear within a few minutes.
+:::
+
+## Deploy our 1FE app to a hosting service
+
+Now that we have our CDN setup, let's deploy our 1fe instance to a hosted service such that it's pointing to our CDN.
+
+### Configure the 1fe instance
+<div className="prose">
+1. Point your 1FE instance to the new CDN assets for live configurations
+
+```tsx title="src/config/ecosystem-configs.ts" {4,7,10}
+// ...
+export const configManagement: OneFEConfigManagement = {
+  widgetVersions: {
+    url: `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/integration/configs/widget-versions.json`,
+  },
+  libraryVersions: {
+    url: `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/integration/configs/lib-versions.json`,
+  },
+  dynamicConfigs: {
+    url: `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/integration/configs/live.json`,
+  },
+  refreshMs: 30 * 1000,
+};
+```
+
+2. Point your 1FE instance to the new CDN assets for critical libraries.
+
+```tsx title="src/config/ecosystem-configs.ts" {3,5,9,10}
+// ...
+const shellBundleUrl =
+  isLocal || SERVER_BUILD_NUMBER === 'local' ? `http://localhost:3001/js/bundle.js` : `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/${ENVIRONMENT}/shell/${SERVER_BUILD_NUMBER}/js/bundle.js`;
+
+const importMapOverrideUrl = isProduction ? `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/${ENVIRONMENT}/libs/@1fe/import-map-overrides/3.1.1/dist/import-map-overrides-api.js` : `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/${ENVIRONMENT}/libs/@1fe/import-map-overrides/3.1.1/dist/import-map-overrides.js`;
+
+export const criticalLibUrls = {
+  importMapOverride: importMapOverrideUrl,
+  systemJS: `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/${ENVIRONMENT}/libs/systemjs/6.14.0/dist/system.min.js`,
+  systemJSAmd: `https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@<tag>/${ENVIRONMENT}/libs/systemjs/6.14.0/dist/extras/amd.min.js`,
+  shellBundleUrl,
+};
+```
+
+3. Update the CSP policy.
+Update the CSP policies as defined in `src/csp-configs.ts` to allow jsdelivr domains(`https://cdn.jsdelivr.net`)
+</div>
+
+### Deploy the 1fe instance