How to add CDN's?

🧑‍💻 Technical Support
1

How can I add a CDN to my 8th wall project? Normally we just added a script tag in index.html, but I’m not sure if adding one will override something.

What is the recommended way of doing this?

2

Here’s how I would do it in a custom component:

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'cdn-component',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const toLoaded = ecs.defineTrigger()

    ecs.defineState('default')
      .initial()
      .onEnter(() => {
        const tag = document.createElement('script')
        tag.setAttribute('src', 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js')
        tag.addEventListener('load', () => {
          toLoaded.trigger()
        })
        document.body.appendChild(tag)
      })
      .onTrigger(toLoaded, 'loaded')

    ecs.defineState('loaded')
      .onEnter(() => {
        // Must ignore the error otherwise it won't build because it doesn't know lodash exists.
        // @ts-ignore
        console.log(`Lodash v${window._.VERSION}`)
        // @ts-ignore
        console.log(_.chunk([1, 2, 3, 4, 5], 2))  // → [[1,2],[3,4],[5]]
      })
  },
})
1 Like
3

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.