Spark AR x Webpack

ashley fletcher
Jun 17, 2019 · 3 min read
Image for post
Image for post

If you’ve spent some time scripting in Spark AR, you’ve probably come across the limitation of one script file per project. This limitation creates a walled environment away from using all the great JavaScript packages that already exist. Using Webpack, we can get around this limitation.

https://gph.is/2xjnab9

Webpack to the rescue

The part we’re interested in is bundling multiple JavaScript modules into one file. This gets you around the one file limit in Spark AR.

If you want to find out more about Webpack, you can check that out here

Getting started

How to use

Once installed, run this from the terminal in the directory of the project:

npm i

This installs the dependencies to run Webpack.

Then run either of these two commands:

npm run dev
// OR
npm run build

Dev uses the “watch” flag to look for changes in your code and automatically compile the code into the script.js file. Use this during development to save manually compiling the code every time. The build command just runs the compiler once.

Once you have Webpack running, you can make changes and import all the files you want, and the Spark AR project should automatically pick up the changes.

Webpack config explained

Output is where we specify where the bundled JS is going to go. For us, this needs to be the script.js file that Spark AR looks for in the scripts folder.

Externals tell Webpack to ignore require statements. Ignoring require statements is vital because Spark has modules to require but doesn’t actually have the modules locally, they get added later on out of our scope. If we didn’t have them set as externals, Webpack would try and bundle those files and fail.

Here’s one I made earlier

Image for post
Image for post

Try the effect on Instagram here: https://www.instagram.com/a/r/?effect_id=411882919538540

The code for the effect is here:

Hopefully, this helps you create more advanced and amazing effects more efficiently.

For more information about Byte’s use of AR, visit our website bytemissioncontrol.com.
And for any questions contact hi@bytelondon.com.

Byte

We are a marketing technology agency.

ashley fletcher

Written by

Developer at Byte working on Augmented Reality and Creative Tech

Byte

Byte

We are a marketing technology agency. We combine technology and creativity to solve brands’ problems.

ashley fletcher

Written by

Developer at Byte working on Augmented Reality and Creative Tech

Byte

Byte

We are a marketing technology agency. We combine technology and creativity to solve brands’ problems.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store