Step 3: Deploy Your Proof of Concept

Perfect! You’ve set up your 1fe instance and experienced the development workflow. In this final part of the tutorial, you’ll deploy your proof of concept to production. This will give you a live demo to share with stakeholders and demonstrate the complete development-to-deployment flow.

What You’ll Learn

• How to deploy 1fe instances to production environments
• Setting up CDN infrastructure for widget assets
• Creating a demonstration-ready proof of concept
• Understanding the production deployment workflow

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.

Setup the required github repositories

You need two github repositories:

CDN Assets Repository

You need a repository for the mock-cdn-assets that will hold our assets. We will be using JSDelivr to serve these assets. JSDelivr works off of GitHub repositories and serves files based on Git tags. We already created a repository for our forked cdn assets on github.com and pushed our changes to that repository as part of the guide to get our 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.

1fe Instance Repository

You need a repository for your 1fe instance that will be used to deploy your 1fe instance.

☁️ 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. For this process, we will need to

Configure the 1fe instance first

For this section, lets assume that you are going to use a git tag for your CDN assets like v1.0.2. You can pick any tag you like, but make sure to use the same tag in the next steps. We will use <tag> to refer to this tag in the rest of this guide. Based on this information (and with some more steps that you will take later), you need to make the following changes to your 1fe instance files.

1. Point your 1fe instance to the new CDN assets for live configurations. These files will be checked in in the next step but we prepare the 1fe instance for it now.

   src/config/ecosystem-configs.ts

   // ...
   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.

   src/config/ecosystem-configs.ts

   // ...
   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)

4. Now check this into your 1fe instance repository. That can help with deploying your 1fe instance later.

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 and playground to the CDN. We need to upload the shell bundle.

You need to pick a random number to act as a build number for your 1fe instance. This will be used to create a unique folder in the CDN for your 1fe instance. Lets call it <build-number>.

1. Build the 1fe instance again using yarn build
2. Copy the bundle over to your mock-cdn-assets repository like so:

mkdir -p mock-cdn-assets/integration/shell/<build-number>/
cp -r <test-app-name>/dist/public/ mock-cdn-assets/integration/shell/<build-number>/

Create and Push Tags for JSDelivr

Let’s now add all the changes you have made to your CDN assets repository and create a the git tag for them. This is crucial for JSDelivr to cache the assets and serve them correctly.

1. Create and push a Git tag:

   cd mock-cdn-assets
   git remote
   git add .
   git tag v1.0.2 # Use your chosen tag here
   git push origin main
   git push origin v1.0.2 # Push the tag to GitHub

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
   
   # playground Widget Bundle
   https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@v1.0.2/integration/widgets/@1fe/playground/<version>/js/1fe-bundle.js
   
   # Live Configurations
   https://cdn.jsdelivr.net/gh/<your-github-username>/<repo-name>@v1.0.2/integration/configs/live.json

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 instance 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.

Deploy the 1fe instance

Your 1fe instance is now ready to be deployed to a server. You can choose any hosting service of your choice that is capable of serving a nodejs express app. Below are some services you can use and their documentation links to help you deploy your 1fe instance.

Service	Documentation
Render	https://render.com/docs/deploy-node-express-app
Heroku	https://devcenter.heroku.com/articles/deploying-nodejs#deploy-your-application-to-heroku
Railway	https://docs.railway.com/guides/express
Azure	https://learn.microsoft.com/en-us/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-cli
AWS	https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-quickstart.html#nodejs-quickstart-deploy
Google cloud	https://cloud.google.com/appengine/docs/standard/nodejs/building-app/deploying-web-service

As a quick start, you can also use the links below with your 1fe instance repository URL to deploy it to either Render or Heroku.

Render Deployment

https://render.com/deploy?repo=<your-1fe-repo-url>

Heroku Deployment

https://www.heroku.com/deploy?template=<your-1fe-repo-url>

After you have deployed your 1fe instance, you will be able to access it at the URL provided by your hosting service!

🎉 Congratulations! Tutorial Complete!

You have successfully completed the entire 1fe proof of concept tutorial! You now have a live, working 1fe instance that demonstrates the complete development-to-deployment workflow.

🎯 What You’ve Accomplished

• ✅ Built a complete 1fe proof of concept from scratch to production
• ✅ Deployed to production with CDN infrastructure and hosting
• ✅ Experienced the full development workflow from setup to deployment
• ✅ Created a demonstrable example to share with stakeholders
• ✅ Understood 1fe’s architecture and benefits through hands-on experience

🚀 What’s Next?

For Immediate Use

• Share your POC with stakeholders and team members
• Demonstrate the development workflow you just experienced
• Evaluate 1fe’s fit for your organization’s needs

For Production Implementation

Next Tutorial Series:

• Take Ownership - Take full control of your 1fe ecosystem with shared configurations, CI/CD infrastructure, and custom shell types

Advanced Implementation:

• Productionize Your 1fe Instance - Transform your POC into enterprise-ready infrastructure
• Authentication Setup - Implement proper user authentication
• Custom Utilities - Build platform-specific utilities for your teams

For Deeper Understanding

• What is 1fe? - Dive deeper into 1fe concepts and architecture
• Infrastructure Setup Guides - Solve specific implementation challenges
• 1fe Server Reference - Access technical documentation and API references

---

💡 Need Help?

• Questions? Check our FAQs or Community Discussions
• Terminology unclear? Visit our Terminology guide
• Found a bug? Report it on GitHub Issues

You’ve successfully proven that 1fe can standardize your frontend development while maintaining team independence. Welcome to the 1fe community! 🎊