Introducing: SQLite3 support in WebContainers! 🧪

The introduction of WebContainers opened the possibility of using browsers to run all kinds of Node-based toolchains like Eleventy blogs, Docusaurus documentation, Nuxt / Next.js websites and more. These SSR/SSG solutions often rely on various markdown dialects as a source of their data – that is quite a convenient way of storing text after all.

While these types of read-only applications are incredibly common, having the possibility to connect to some kind of SQL database would enable new types of applications that need both read and write capabilities. This has been a top-requested feature, as it enables everything from todo apps to authentication systems.

That is why we are really excited to announce the experimental support for the SQLite database in WebContainers. What that means is, you can npm install it right now and use it directly, or via an ORM like Sequelize.

You can also work with it in a backend framework like Express!

Why is this useful? If you’re prototyping a new application that needs a database backend, this is perfect for that. And it’s all sandboxed inside your browser.

You can choose to either re-create the database whenever project loads (great e.g. for sharing demos), or persist the database file with the project:

• By putting the sqlite file in a folder with name starting with . (e.g. ".data/") you tell StackBlitz not to store it in the backend. This means the file only stays for the duration of the current editor session, and when you reload the project, it will have to be recreated. 💻 You can see the non-persisting db example here – note the storage: '.data/database.sqlite' entry in Sequelize configuration object.
• If you put the sqlite file in any other folder, it will be uploaded to the backend – just like any other binary file (e.g. image). 💻 You can see the persisting db example here – see the storage: 'data/database.sqlite' entry in Sequelize configuration object. Note that uploading binary files is a member-only feature.

At this point it’s worth mentioning that while this polyfill is based on the amazing node-sqlite3 project it does not provide every feature that the original module offers. It is very fresh and experimental, but we just can’t wait to see what you’ll make with it!

Feel free to shoot us a tweet @stackblitz or jump into our Discord to share your thoughts and creations! ⚡️