Search code examples
javascriptjquerynpmsmartystreets

How do I convert SmartyStreets' jQuery.LiveAddress plugin to its JavaScript SDK?


I have a website where the jQuery.LiveAddress plugin is implemented, but it was deprecated and then totally removed by SmartyStreets in 2014.

https://www.smartystreets.com/archive/jquery-plugin/website/configure

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//d79i1fxsrar4t.cloudfront.net/jquery.liveaddress/5.2/jquery.liveaddress.min.js"></script>
<script>var liveaddress = $.LiveAddress({
    key: "YOUR_WEBSITE_KEY_HERE",
    debug: true,
    target: "US|INTERNATIONAL",
    addresses: [{
        address1: '#street-address',
        locality: '#city',
        administrative_area: '#state',
        postal_code: '#zip',
        country: '#country'
    }]
});
</script>

There is now a JavaScript SDK: https://www.smartystreets.com/docs/sdk/javascript

const SmartyStreetsSDK = require("smartystreets-javascript-sdk");
const SmartyStreetsCore = SmartyStreetsSDK.core;
const Lookup = SmartyStreetsSDK.usStreet.Lookup;

// for Server-to-server requests, use this code:
// let authId = process.env.SMARTY_AUTH_ID;
// let authToken = process.env.SMARTY_AUTH_TOKEN;
// const credentials = new SmartyStreetsCore.StaticCredentials(authId, authToken);

// for client-side requests (browser/mobile), use this code:
let key = process.env.SMARTY_WEBSITE_KEY;
const credentials = new SmartyStreetsCore.SharedCredentials(key);

It says "for client-side requests (browser/mobile), use this code", but am I correct in assuming that it is not possible to get this code working as browser JavaScript? Wouldn't I need to be running node as a service on my server to be using this code?


Solution

  • The key file that I was missing was the browserify.js file in the SmartyStreets JavaScript SDK.

    1. Run npm install smartystreets-javascript-sdk --save-dev in your project's root directory
    2. Change directory to node_modules/smartystreets-javascript-sdk
    3. Run npm install in this directory
    4. Run rm -rf dist && node browserify.js (script will fail if the dist folder exists)
    5. Copy dist/smartystreets-sdk-1...min.js to a dependencies folder for your main project.

    I tried to write a grunt task to take the SmartyStreets SDK and automatically update it, browserify it, and deploy it along with the rest of our website, but it turned out to be too much of a hassle with the time constraints given. If anyone else writes a grunt task for this please share!