{"id":514,"date":"2021-04-06T22:50:19","date_gmt":"2021-04-07T05:50:19","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=514"},"modified":"2023-02-16T18:18:23","modified_gmt":"2023-02-17T02:18:23","slug":"integrate-a-spa","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/integrate-a-spa\/","title":{"rendered":"Integrate a SPA"},"content":{"rendered":"\n

*This article was modeled from the current Adobe React SPA documentation<\/a>.<\/em><\/p>\n\n\n\n

Understand how the source code for a Single Page Application (SPA) written in Vue can be integrated with an Adobe Experience Manager (AEM) Project. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API.<\/p>\n\n\n\n

Objective<\/h2>\n\n\n\n
  1. Understand how the SPA project is integrated with AEM with client-side libraries.<\/li>
  2. Learn how to use a webpack development server for dedicated front-end development.<\/li>
  3. Explore the use of a proxy<\/strong> and static mock<\/strong> file for developing against the AEM JSON model API<\/li><\/ol>\n\n\n\n

    What you will build<\/h2>\n\n\n\n

    This chapter will add a simple Header<\/code> component to the SPA. In the process of building out this static Header<\/code> component several approaches to AEM SPA development will be used.<\/p>\n\n\n\n

    \"\"
    The SPA is extended to add a static Header component
    <\/figcaption><\/figure>\n\n\n\n

    Prerequisites<\/h2>\n\n\n\n

    Review the required tooling and instructions for setting up a local development environment<\/a>.<\/p>\n\n\n\n

    Get the code<\/h3>\n\n\n\n
    1. Download the starting point for this tutorial via Git:<\/li><\/ol>\n\n\n\n
      $ git clone https:\/\/github.com\/mavicellc\/aem-guides-wknd-spa.git\n$ cd aem-guides-wknd-spa\n$ git checkout Vue\/integrate-spa-start<\/code><\/pre>\n\n\n\n

      2. Deploy the code base to a local AEM instance using Maven:<\/p>\n\n\n\n
      $ mvn clean install -PautoInstallSinglePackage<\/code><\/pre>\n\n\n\n
      <\/p>\n\n\n\n
      3. If using AEM 6.x<\/a> add the classic<\/code> profile:<\/p>\n\n\n\n
      $ mvn clean install -PautoInstallSinglePackage -Pclassic<\/code><\/pre>\n\n\n\n
      <\/p>\n\n\n\n
      You can always view the finished code on GitHub<\/a> or check the code out locally by switching to the branch Vue\/integrate-spa-solution<\/code>.<\/p>\n\n\n\n
      Integration approach<\/h2>\n\n\n\n
      Two modules were created as part of the AEM project: ui.apps<\/code> and ui.frontend<\/code>.

      The ui.frontend<\/code> module is a       webpack<\/a> project that contains all of the SPA source code. A majority of the SPA development and testing will be done in the webpack project. When a production build is triggered, the SPA is built and compiled using webpack. The compiled artifacts (CSS and Javascript) are copied into the ui.apps<\/code> module which is then deployed to the AEM runtime.<\/p>\n\n\n\n
      Inspect the SPA integration<\/h3>\n\n\n\n
      Next, inspect the ui.frontend<\/code> module to understand the SPA that has been auto-generated by the AEM Project archetype<\/a>.<\/p>\n\n\n\n
      1. In the IDE of your choice open up the AEM Project for the WKND SPA. <\/li><\/ol>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        2. Expand and inspect the ui.frontend<\/code> folder. Open the file ui.frontend\/package.json<\/code><\/p>\n\n\n\n
        3. Under the dependencies<\/code> you should see several related to Vu<\/code>e.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        The ui.frontend<\/code> is a Vue application based on the Vue CLI Template<\/a>.<\/p>\n\n\n\n
        4. There are also two dependencies prefixed with @adobe<\/code>, and one prefixed with @mavice.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        The above modules make up the AEM SPA Editor JS SDK<\/a> and provide the functionality to make it possible to map SPA Components to AEM Components.<\/p>\n\n\n\n
        5. In the package.json<\/code> file there are three scripts<\/code> defined:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        These are standard build scripts made available by the Vue CLI.<\/p>\n\n\n\n
        The only difference is the addition of && clientlib<\/code> to the build<\/code> script. This extra instruction is responsible for copying the compiled SPA into the ui.apps<\/code> module as a client-side library during a build.<\/p>\n\n\n\n
        The npm module aem-clientlib-generator<\/a> is used to facilitate this.
        <\/p>\n\n\n\n
        6. Inspect the file ui.frontend\/clientlib.config.js<\/code>. This configuration file is used by aem-clientlib-generator<\/a> to determine how to generate the client library.<\/p>\n\n\n\n
        7. Inspect the file ui.frontend\/pom.xml<\/code>. This file transforms the ui.frontend<\/code> folder into a Maven module<\/a>. The pom.xml<\/code> file has been updated to use the frontend-maven-plugin<\/a> to test<\/strong> and build<\/strong> the SPA during a Maven build.<\/p>\n\n\n\n
        8. Inspect the file main.<\/code>ts at ui.frontend\/src\/main.ts<\/code>:<\/p>\n\n\n\n
        <\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        main.ts<\/code> is the entrypoint of the SPA. ModelManager<\/code> is provided by the AEM SPA Editor JS SDK. It is responsible for calling and injecting the pageModel<\/code> (the JSON content) into the application.<\/p>\n\n\n\n
        Add a Header component<\/h3>\n\n\n\n
        Next, add a new component to the SPA and deploy the changes to a local AEM instance.<\/p>\n\n\n\n
        1. In the ui.frontend<\/code> module, beneath ui.frontend\/src\/components<\/code> create a new folder named Header<\/code>.<\/li>
        2. Create a file named Header.<\/code>vue beneath the Header<\/code> folder.<\/li><\/ol>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          3. Populate Header.<\/code>vue with the following:
          <\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          4. Open the file ui.frontend\/src\/App.js<\/code>. This is the application entry-point.<\/p>\n\n\n\n
          5. Make the following updates to App.ts<\/code> to include the static Header<\/code>:
          <\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          6. Open a new terminal and navigate into the ui.frontend<\/code> folder and run the npm run build<\/code> command:<\/p>\n\n\n\n
          $ npm run build<\/code><\/pre>\n\n\n\n
          <\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          7. Navigate to the ui.apps<\/code> folder Beneath ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd-spa-vue\/clientlibs\/clientlib-vue<\/code> you should see the compiled SPA files have been copied from the ui.frontend\/build<\/code> folder.<\/p>\n\n\n\n
          <\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          8. Return to the terminal and navigate into the ui.apps<\/code> folder. Execute the following Maven command:<\/p>\n\n\n\n
          $ mvn clean install -PautoInstallPackage <\/code><\/code><\/pre>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          This will deploy the ui.apps<\/code> package to a local running instance of AEM.<\/p>\n\n\n\n
          9. Open a browser tab and navigate to http:\/\/localhost:4502\/editor.html\/content\/wknd-spa-vue\/us\/en\/home.html<\/a>. You should now see the contents of the Header<\/code> component being displayed in the SPA.<\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          Steps 6-8 are executed automatically when triggering a Maven build from the root of the project (i.e mvn clean install -PautoInstallSinglePackage<\/code>). You should now understand the basics of the integration between the SPA and AEM client-side libraries. Notice that you can still edit and add Text<\/code> components in AEM beneath the static Header<\/code> component.<\/p>\n\n\n\n
          Webpack Dev Server – Proxy the JSON API<\/h2>\n\n\n\n
          As seen in the previous exercises, performing a build and syncing the client library to a local instance of AEM takes a few minutes. This is acceptable for final testing, but is not ideal for the majority of the SPA development.<\/p>\n\n\n\n
          A webpack-dev-server<\/a> can be used to rapidly develop the SPA. The SPA is driven by a JSON model generated by AEM. In this exercise the JSON content from a running instance of AEM will be proxied<\/strong> into the development server.<\/p>\n\n\n\n
          1. Return to the IDE and open the file ui.frontend\/package.json<\/code>.<\/li><\/ol>\n\n\n\n
            Look for a block of code like the following:
            <\/p>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            The Vue CLI <\/a>provides an easy mechanism to proxy API requests. All unknown requests will be proxied through localhost:4502<\/code>, the local AEM quickstart.<\/p>\n\n\n\n
            2. Open a terminal window and navigate to the ui.frontend<\/code> folder. Run the command npm run serve<\/code>:<\/p>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            3. Open a new browser tab (if not already opened) and navigate to http:\/\/localhost:8080\/content\/wknd-spa-vue\/us\/en\/home.html<\/a>.<\/p>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure><\/div>\n\n\n\n
            You should see the same content as in AEM, but without any of the authoring capabilities enabled.<\/p>\n\n\n\n
            4. Return to the IDE and create a new folder named media<\/code> at ui.frontend\/src\/media<\/code>.<\/p>\n\n\n\n
            5. Download and add the following WKND logo to the assets<\/code> folder:<\/p>\n\n\n\n
            import wkndLogoDark from '..\/..\/media\/wknd-logo-dk.png'; <\/code><\/code><\/pre>\n\n\n\n

            6. Make the following updates to Header.js<\/code> to include the logo as part of the header:<\/p>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            Wanna know why we are using ‘reqiure’ ? Check this out. <\/em><\/p>\n\n\n\n
            https:\/\/cli.vuejs.org\/guide\/html-and-static-assets.html#relative-path-imports<\/a><\/p>\n\n\n\n
            Next, Save the changes to Header.<\/code>vue.

            Return to the browser at             http:\/\/localhost:8080\/content\/wknd-spa-vue\/us\/en\/home.html<\/a>. You should immediately see the changes to the app reflected.<\/p>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            You can continue to make content updates in AEM and see them reflected in webpack-dev-server<\/strong>, since we are proxying the content.<\/p>\n\n\n\n
            9. Stop the webpack dev server with ctrl+c<\/code> in the terminal.<\/p>\n\n\n\n
            Webpack Dev Server – Mock JSON API (Coming Soon)<\/em><\/h2>\n\n\n\n
            Mock JSON API Functionality is currently in development.<\/p>\n\n\n\n
            <\/p>\n\n\n\n
            Add Styles with Sass<\/h3>\n\n\n\n
            This project will use Sass<\/a> for a few useful features like variables. Sass is already included when creating the project from the Vue CLI.<\/p>\n\n\n\n
            Use either the Proxy of Mock approach for handling the JSON model API.

            1. Return to the IDE and beneath ui.frontend\/src<\/code> create a new folder named styles<\/code>.

            2. Create a new file beneath ui.frontend\/src\/styles<\/code> named _variables.scss<\/code> and populate it with the following variables:
            <\/p>\n\n\n\n
            \/\/_variables.scss <\/code>\n\/\/== Colors <\/code>\n\/\/ <\/code>\n\/\/## Gray and brand colors for use across theme. <\/code>\n$black:                  #202020; <\/code>\n$gray:                   #696969; <\/code>\n$gray-light:             #EBEBEB; <\/code>\n$gray-lighter:           #F7F7F7; <\/code>\n$white:                  #FFFFFF; <\/code>\n$yellow:                 #FFEA00; <\/code>\n$blue:                   #0045FF; <\/code>\n\/\/== Typography <\/code>\n\/\/ <\/code>\n\/\/## Font, line-height, and color for body text, headings, and more. $font-family-sans-serif:  \"Helvetica Neue\", Helvetica, Arial, sans-serif; <\/code>\n$font-family-serif:       Georgia, \"Times New Roman\", Times, serif; $font-family-base:        $font-family-sans-serif; <\/code>\n$font-size-base:          18px; $line-height-base:        1.5; <\/code>\n$line-height-computed:    floor(($font-size-base * $line-height-base)); <\/code>\n\n\/\/ Functional Colors $brand-primary:             <\/code>\n$yellow; $body-bg:                   <\/code>\n$white; $text-color:                <\/code>\n$black; $text-color-inverse:        <\/code>\n$gray-light; $link-color:                <\/code>\n$blue; \/\/Layout $max-width: 1024px; <\/code>\n\n\/\/ Spacing <\/code>\n$gutter-padding: 12px;<\/code><\/code><\/pre>\n\n\n\n

            3. Replace the contents with the following in App.scss with the following:<\/p>\n\n\n\n
            @import <\/em>'.\/styles\/variables';\n\nbody {\n  background-color: $body-bg;\n  font-family: $font-family-base;\n  margin: 0;\n  padding: 0;\n  font-size: $font-size-base;\n  text-align: left;\n  color: $text-color;\n  line-height: $line-height-base;\n}\n\n\/\/spacing for header\n<\/em>body.page <\/em>{\n  padding-top: 75px;\n}<\/code><\/pre>\n\n\n\n
            <\/p>\n\n\n\n
            4. Replace the <style> tag in Header.vue with the following:
            <\/p>\n\n\n\n
            <style lang<\/em>=\"scss\">
              .Header <\/em>{
                width: 100%;
                position: fixed;
                top: 0;
                left:0;
                z-index: 99;
                background-color: $brand-primary;
                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
              }

              .Header-container <\/em>{
                display: flex;
                max-width: $max-width;
                margin: 0 auto;
                padding-left: $gutter-padding;
                padding-right: $gutter-padding;
              }

              .Logo <\/em>{
                z-index: 100;
                display: flex;
                padding-top: $gutter-padding;
                padding-bottom: $gutter-padding;
              }

              .Logo-img <\/em>{
                width: 100px;
              }
            <\/style><\/pre>\n\n\n\n
            5. Finally, add the _variables.scss to the loaderOptions for SASS within the vue.config.js file.<\/p>\n\n\n\n
            module.exports = {\n  css: {\n    loaderOptions: {\n      sass: {\n        prependData: `@import \"@\/styles\/_variables.scss\";`\n      }\n    }\n  },\n...\n...<\/pre>\n\n\n\n
            6. Start the webpack-dev-server<\/strong> and return to the browser<\/strong>: http:\/\/localhost:8080\/content\/wknd-spa-<\/a>vue<\/a>\/us\/en\/home.html<\/a><\/p>\n\n\n\n
            $ npm run serve<\/code><\/pre>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            You should now see the updated styles added to the Header<\/code> component.<\/p>\n\n\n\n
            <\/p>\n\n\n\n
            Deploy SPA updates to AEM<\/h3>\n\n\n\n
            The changes made to the Header<\/code> are currently only visible through the webpack-dev-server<\/strong>. Deploy the updated SPA to AEM to see the changes.

            1. Navigate to the root of the project (aem-guides-wknd-spa<\/code>) and deploy the project to AEM using Maven:<\/p>\n\n\n\n
            $ cd ..\n$ mvn clean install -PautoInstallSinglePackage<\/code><\/pre>\n\n\n\n
            <\/p>\n\n\n\n
            2. Navigate to http:\/\/localhost:4502\/editor.html\/content\/wknd-spa-vue\/us\/en\/home.html<\/a>. You should see the updated Header<\/code> with logo and styles applied.
            <\/p>\n\n\n\n
            <\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            Now that the updated SPA is in AEM, authoring can continue.<\/p>\n\n\n\n
            Congratulations!<\/h2>\n\n\n\n
            Congratulations, you have updated the SPA and explored the integration with AEM! You now know two different approaches for developing the SPA against the AEM JSON model API using a webpack-dev-server<\/strong>.<\/p>\n\n\n\n
            You can always view the finished code on GitHub<\/a> or check the code out locally by switching to the branch Vue\/integrate-spa-solution<\/code>.<\/p>\n\n\n\n
            Next Steps<\/h3>\n\n\n\n
            Map SPA components to AEM components<\/a> – Learn how to map Vue components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring.<\/p>\n","protected":false},"excerpt":{"rendered":"
            *This article was modeled from the current Adobe React SPA documentation. Understand how the source code for a Single Page Application (SPA) written in Vue can be integrated with an Adobe Experience Manager (AEM) Project. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA…<\/p>\n","protected":false},"author":2,"featured_media":560,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,36],"tags":[],"_links":{"self":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/514"}],"collection":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":13,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/514\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/514\/revisions\/694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media\/560"}],"wp:attachment":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/categories?post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/tags?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}