CODEWITHSUNDEEP
javascriptamazon-web-servicesvue.jsaws-sdk
Evonet
Evonet

Reputation: 3640

Using the AWS SDK for Javascript with Vue.js 2.0

I'm accessing API's hosted by AWS API Gateway with Vue.Js.

There's some pretty good instructions here http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-generate-sdk-javascript.html.

I have a bunch of different components, each of which will get data from a different API GET call. Initially I tried adding all the script files to my index.html and doing the following:

RetailerDetails.vue:

<script>

export default {
    name: 'RetailerDetails',
    mounted() {
        var apigClient = apigClientFactory.newClient({
            accessKey: 'blah',
            secretKey: 'blah',
        });

        apigClient.businessGet = function (params, body, additionalParams) {
            if (additionalParams === undefined) { additionalParams = {}; }

            apiGateway.core.utils.assertParametersDefined(params, [], ['body']);

            var businessGetRequest = {
                verb: 'get'.toUpperCase(),
                path: pathComponent + uritemplate('/business').expand(apiGateway.core.utils.parseParametersToObject(params, [])),
                headers: apiGateway.core.utils.parseParametersToObject(params, []),
                queryParams: apiGateway.core.utils.parseParametersToObject(params, []),
                body: body
            };

            return apiGatewayClient.makeRequest(businessGetRequest, authType, additionalParams, config.apiKey);
        };
    },
}

That didn't work, I got ReferenceError: apigClientFactory is not defined.

So then I tried taking the script tags out of my index.html and adding the following lines to my component:

require('../assets/js/lib/axios/dist/axios.standalone.js');
require('../assets/js/lib/CryptoJS/rollups/hmac-sha256.js');
require('../assets/js/lib/CryptoJS/rollups/sha256.js');
require('../assets/js/lib/CryptoJS/components/hmac.js');
require('../assets/js/lib/CryptoJS/components/enc-base64.js');
require('../assets/js/lib/url-template/url-template.js');
require('../assets/js/lib/apiGatewayCore/sigV4Client.js');
require('../assets/js/lib/apiGatewayCore/apiGatewayClient.js');
require('../assets/js/lib/apiGatewayCore/simpleHttpClient.js');
require('../assets/js/lib/apiGatewayCore/utils.js');   
require('../assets/js/custom/apigClient.js');

This don't work either, now I get ReferenceError: Can't find variable: CryptoJS

which from what I understand is because I haven't referenced the flles properly?

What do I need to do?

Upvotes: 1

Views: 1523

Answers (1)

Mark
Mark

Reputation: 92461

Don't put javascript files in the assets folder. Put them in the static folder instead. If you are using the CLI install, Webpack sorts through the assets and takes care of things like image and fonts, but not javascript files.

When I put the files in the /static/ or something like /static/js/ and then bring them in with:

<script type="text/javascript" src="/static/apigClient.js"></script>

the functions are available to my Vue components. Maybe there's a nicer way that doesn't pollute the global namespace, but this is a pretty easy solution (assuming it also works for you).

Upvotes: 2

Related Questions