You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
15
21
:::
16
22
17
23
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.
18
-
<divclassName="prose">
19
-
1.**Deploy our assets to a public CDN (JSDelivr).**
20
-
2.**Deploy our 1FE app to a hosting service.**
21
-
</div>
22
-
23
-
## <SlCloudUploadstyle={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Deploy our assets to a CDN
24
24
25
-
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.
26
-
27
-
### Setup the github repository
25
+
<divclassName="prose">
28
26
29
-
[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.
27
+
1.**Deploy our assets to a public CDN (JSDelivr).**
30
28
31
-
#### Add the 1fe instance bundle to the CDN
32
-
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.
29
+
2.**Deploy our 1FE app to a hosting service.**
33
30
34
-
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`.
31
+
</div>
35
32
36
-
### Create and Push Tags for JSDelivr
33
+
### Setup the required github repositories
37
34
38
-
Let's now create a git tag for our assets.
35
+
You need two github repositories:
39
36
40
37
<divclassName="prose">
41
-
1.**Create and push a Git tag - this is crucial for JSDelivr caching:**
42
38
43
-
```bash
44
-
cd mock-cdn-assets
45
-
git add .
46
-
git commit -m "Add widget assets for deployment"
47
-
git tag v1.0.2
48
-
git push origin main
49
-
git push origin v1.0.2
50
-
```
39
+
1. One for the `mock-cdn-assets` that will hold our assets - [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.
51
40
52
-
2.**Your assets are now publicly accessible via JSDelivr URLs:**
41
+
2.One for your 1FE instance that will be used to deploy your 1FE app.
**JSDelivr not reflecting your changes?** Try purging the cache at https://www.jsdelivr.com/tools/purge. Changes typically appear within a few minutes.
67
-
:::
47
+
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
68
48
69
-
##Deploy our 1FE app to a hosting service
49
+
### Configure the 1fe instance first
70
50
71
-
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.
51
+
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.
72
52
73
-
### Configure the 1fe instance
74
53
<divclassName="prose">
75
-
1. Point your 1FE instance to the new CDN assets for live configurations
54
+
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.
Update the CSP policies as defined in `src/csp-configs.ts` to allow jsdelivr domains(`https://cdn.jsdelivr.net`)
94
+
Update the CSP policies as defined in `src/csp-configs.ts` to allow jsdelivr domains(`https://cdn.jsdelivr.net`)
95
+
96
+
4. Now check this into your 1FE instance repository. That can help with deploying your 1fe instance later.
97
+
112
98
</div>
113
99
114
-
### Deploy the 1fe instance
100
+
### Add the 1fe instance bundle to the CDN
101
+
102
+
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.
103
+
104
+
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>`.
105
+
106
+
<divclassName="prose">
107
+
108
+
1. Build the 1fe instance again using `yarn build`
109
+
110
+
2. Copy the bundle over to your `mock-cdn-assets` repository like so:
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.
122
+
123
+
<divclassName="prose">
124
+
1.**Create and push a Git tag:**
125
+
126
+
```bash
127
+
cd mock-cdn-assets
128
+
git remote
129
+
git add .
130
+
git tag v1.0.2 # Use your chosen tag here
131
+
git push origin main
132
+
git push origin v1.0.2 # Push the tag to GitHub
133
+
```
134
+
135
+
2.**Your assets are now publicly accessible via JSDelivr URLs:**
**JSDelivr not reflecting your changes?** Try purging the cache at https://www.jsdelivr.com/tools/purge. Changes typically appear within a few minutes.
151
+
:::
152
+
153
+
## Deploy our 1FE app to a hosting service
154
+
155
+
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.
156
+
157
+
### Deploy the 1fe instance
158
+
159
+
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.
After you have deployed your 1fe instance, you will be able to access it at the URL provided by your hosting service!
178
+
179
+
🎉 Congratulations! You have successfully deployed your 1FE instance and its assets to a public CDN. You can now share this URL with others to showcase the benefits of using 1FE.
0 commit comments