A standalone JS bundle allows you to encapsulate all your botonic app in a single static file that you can host anywhere and load it into your HTML. This is actually what the
botonic serve command does! In this guide we'll show how to tweak the webpack config to create a production ready JS bundle. Even though it has a lot of limitations, it could be a good choice for simple web-based use cases.
This is the best option if you:
- Just need a chatbot embedded in your website or mobile app
- Are paranoid about privacy and don't want any user data to leave the browser and be stored in any database
DON'T choose this option if you:
Are worried about page load (the generated bundle can be pretty heavy)
Need to use sensitive tokens in your codebase (they'll be public)
Need integration with messaging apps
Need to use bot/human handoff
Need to use libraries that only work on Node (we always suggest to use isomorphic libraries if possible)
See Deploy to Hubtype for these use cases.
- Create a new folder
<projectRoot>/src/self-hostedin your botonic project
- Create an
app.jsfile in that folder and copy/paste this code:
- Create a new entry file at
<projectRoot>/webpack-entries/self-hosted-entry.jswith this code:
- Edit the
webpack.config.jsfile and add this configuration:
and also replace the exported function at the end of
- Finally, in your
package.jsonadd a script to build the bundle:
Now you can run
npm run build:self-hosted that will generate a
dist/webchat.botonic.js file that you can host anywhere and load in your html with
Once you have generated your bundle, you can ship your application in a directory like this:
Note: Remember to include the
assetsfolder you used during development if necessary.
index.html should look like this:
In production, consider serving the
webchat.botonic.js file via a CDN.