{ "componentChunkName": "component---node-modules-lekoarts-gatsby-theme-minimal-blog-core-src-templates-post-query-tsx", "path": "/aep-web-sdk-implementation-with-server-side-and-alloy-js-orchestration", "result": {"data":{"post":{"slug":"/aep-web-sdk-implementation-with-server-side-and-alloy-js-orchestration","title":"AEP Web SDK Implementation with Server-side and Alloy.js Orchestration","date":"12.10.2022","tags":[{"name":"Adobe","slug":"adobe"},{"name":"AEP","slug":"aep"},{"name":"Web SDK","slug":"web-sdk"},{"name":"Hybrid","slug":"hybrid"},{"name":"Server-side","slug":"server-side"}],"description":"AEP Web SDK Implementation with Server-side and Alloy.js Orchestration","canonicalUrl":null,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"AEP Web SDK Implementation with Server-side and Alloy.js Orchestration\",\n \"date\": \"2022-10-12T00:00:00.000Z\",\n \"description\": \"AEP Web SDK Implementation with Server-side and Alloy.js Orchestration\",\n \"tags\": [\"Adobe\", \"AEP\", \"Web SDK\", \"Hybrid\", \"Server-side\"],\n \"banner\": \"./target-premium-banner.jpg\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"AEP Web SDK Implementation with Server-side and Alloy.js Orchestration\"), mdx(\"h2\", null, \"Web SDK Client-side Implementation\"), mdx(\"h3\", null, \"Step 1: Install Web SDK\"), mdx(\"p\", null, \"To install Web SDK, there are options to use Data Collection UI, NPM package or CDN. We will grab files from CDN for this guide.\"), mdx(\"p\", null, \"Minified CDN library: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js\"\n }, \"https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js\"), \"\\nUn-minified CDN library: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://cdn1.adoberesources.net/alloy/2.6.4/alloy.js\"\n }, \"https://cdn1.adoberesources.net/alloy/2.6.4/alloy.js\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Use URL structure: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://cdn1.adoberesources.net/alloy/%5BVERSION%5D/alloy.min.js\"\n }, \"https://cdn1.adoberesources.net/alloy/[VERSION]/alloy.min.js\"), \" OR alloy.js for the non-minified version.\")), mdx(\"p\", null, \"Add to HTML's \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" with a base code as shown below:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"\\n\\n\")), mdx(\"h3\", null, \"Step 2: Configure Web SDK\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"alloy(\\\"configure\\\", {\\n \\\"edgeConfigId\\\": \\\"ebebf826-a01f-4458-8cec-ef61de241c93\\\",\\n \\\"orgId\\\":\\\"ADB3LETTERSANDNUMBERS@AdobeOrg\\\"\\n});\\n\")), mdx(\"h2\", null, \"AEP Edge API Server-side Implementation\"), mdx(\"p\", null, \"We will use \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/adobe/alloy-samples\"\n }, \"Alloy Samples repository\"), \" to see how hybrid implementaiton is orchestrated.\\nThe repository includes multiple examples including client-side, server-side and hybrid approaches.\\nFollow installation instructions to run a hybrid SPA demo from \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/adobe/alloy-samples/tree/main/personalization-hybrid-spa\"\n }, mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"personalization-hybrid-spa\")), \" folder.\\nOnce the Node Express app with React pages is running locally, let's examine the server-side implementation details.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"THIS IS A WORK IN PROGRESS.\")), mdx(\"h2\", null, \"Documentation\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://experienceleague.adobe.com/docs/experience-platform/edge/fundamentals/installing-the-sdk.html?lang=en\"\n }, \"https://experienceleague.adobe.com/docs/experience-platform/edge/fundamentals/installing-the-sdk.html?lang=en\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"AEP Web SDK Implementation with Server-side and Alloy.js Orchestration Web SDK Client-side Implementation Step 1: Install Web SDK To install…","timeToRead":1,"banner":null}},"pageContext":{"slug":"/aep-web-sdk-implementation-with-server-side-and-alloy-js-orchestration","formatString":"DD.MM.YYYY"}}, "staticQueryHashes": ["2744905544","3090400250","318001574"]}