{"id":489,"date":"2021-03-29T20:32:59","date_gmt":"2021-03-30T03:32:59","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=489"},"modified":"2021-04-13T10:14:18","modified_gmt":"2021-04-13T17:14:18","slug":"vue-spa-editor-project","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/vue-spa-editor-project\/","title":{"rendered":"Vue SPA Editor Project"},"content":{"rendered":"\n

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

Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for a Vue application integrated with the AEM SPA Editor.<\/p>\n\n\n\n

Objective<\/h2>\n\n\n\n
  1. Understand the structure of a new AEM SPA Editor project built from a Maven archetype.<\/li>
  2. Deploy the starter project to a local instance of AEM.<\/li><\/ol>\n\n\n\n

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

    In this chapter, a new AEM project will be deployed, based on the Mavice AEM Project Archetype<\/a>. The AEM project will be bootstrapped with a very simple starting point for the Vue SPA. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and will be built upon in future chapters.<\/p>\n\n\n\n

    \"\"
    Starting site hierarchy for the WKND SPA.<\/em><\/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>. Ensure that a fresh instance of Adobe Experience Manager, started in author<\/strong> mode, is running locally.<\/p>\n\n\n\n

    Get the project<\/h2>\n\n\n\n

    There are several options to create a Maven Multi-module project for AEM. This tutorial used the latest Mavice AEM Project Archetype<\/a> as a basis for the tutorial code. Modifications have been made to the project code in order to support multiple versions of AEM. Please review the note about backward compatibility<\/a>.<\/p>\n\n\n\n

    CAUTION<\/strong><\/p>\n\n\n\n

    It is a best practice to use the latest<\/strong> version of the archetype to generate a new project for a real-world implementation. AEM projects should target a single version of AEM using the aemVersion<\/code> property of the archetype (Ex. aemVersion=”6.4.8″). Mavice has added an addition<\/a> to the Adobe Archetype 26 which offers an option to use Vue as a value for the frontendModule property.
    <\/p>\n\n\n\n

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

      2. The following folder and file structure represents the AEM Project that was generated by the Maven archetype on the local file system:<\/p>\n<\/div><\/div>\n\n\n\n
      \n
      |--- aem-guides-wknd-spa\n    |--- all\/\n    |--- core\/\n    |--- dispatcher\/\n    |--- ui.apps\/\n    |--- ui.apps.structure\/\n    |--- ui.content\/\n    |--- ui.frontend \/\n    |--- it.tests\/\n    |--- pom.xml\n    |--- README.md\n    |--- .gitignore\n    |--- archetype.properties<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
      <\/p>\n\n\n\n
      3. The following properties were used when generating the AEM project from the Mavice AEM Project archetype:<\/a><\/p>\n\n\n\n
      Property<\/th>Value<\/th><\/tr><\/thead>
      aemVersion<\/td>cloud<\/td><\/tr>
      appTitle<\/td>WKND SPA Vue<\/td><\/tr>
      appId<\/td>wknd-spa-vue<\/td><\/tr>
      groupId<\/td>com.adobe.aem.guides<\/td><\/tr>
      frontendModule<\/td>vue<\/td><\/tr>
      package<\/td>com.adobe.aem.guides.wknd.spa.vue<\/td><\/tr>
      includeExamples<\/td>n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      Build the project<\/h2>\n\n\n\n
      Next, compile, build, and deploy the project code to a local instance of AEM using Maven.<\/p>\n\n\n\n
      1. Ensure an instance of AEM is running locally on port 4502<\/strong>.
        <\/li>
      2. From the command line terminal verify that Maven is installed:<\/li><\/ol>\n\n\n\n
        $ mvn --version\n Apache Maven 3.6.2\n Maven home: \/Library\/apache-maven-3.6.2\n Java version: 11.0.4, vendor: Oracle Corporation, runtime: \/Library\/Java\/JavaVirtualMachines\/jdk-11.0.4.jdk\/Contents\/Home<\/code><\/pre>\n\n\n\n
        <\/p>\n\n\n\n
        3. Run the below Maven command from the aem-guides-wknd-spa<\/code> directory to build and deploy the project to AEM:<\/p>\n\n\n\n
        $ mvn clean install -PautoInstallSinglePackage<\/code><\/pre>\n\n\n\n

        If using AEM 6.x<\/a>:<\/p>\n\n\n\n
        $ mvn clean install -PautoInstallSinglePackage -Pclassic<\/code><\/pre>\n\n\n\n

        The multiple modules of the project should be compiled and deployed to AEM.
        <\/p>\n\n\n\n
         [INFO] ------------------------------------------------------------------------\n [INFO] Reactor Summary for wknd-spa-vue 1.0.0-SNAPSHOT:\n [INFO] \n [INFO] wknd-spa-vue ..................................... SUCCESS [  0.523 s]\n [INFO] WKND SPA Vue - Core .............................. SUCCESS [  8.069 s]\n [INFO] wknd-spa-vue.ui.frontend - UI Frontend ........... SUCCESS [01:23 min]\n [INFO] WKND SPA Vue - Repository Structure Package ...... SUCCESS [  0.830 s]\n [INFO] WKND SPA Vue - UI apps ........................... SUCCESS [  4.654 s]\n [INFO] WKND SPA Vue - UI content ........................ SUCCESS [  1.607 s]\n [INFO] WKND SPA Vue - All ............................... SUCCESS [  0.384 s]\n [INFO] WKND SPA Vue - Integration Tests Bundles ......... SUCCESS [  0.770 s]\n [INFO] WKND SPA Vue - Integration Tests Launcher ........ SUCCESS [  1.407 s]\n [INFO] WKND SPA Vue - Dispatcher ........................ SUCCESS [  0.055 s]\n [INFO] ------------------------------------------------------------------------\n [INFO] BUILD SUCCESS\n [INFO] ------------------------------------------------------------------------\n [INFO] Total time:  01:44 min<\/code><\/pre>\n\n\n\n
        <\/p>\n\n\n\n
        The Maven profile autoInstallSinglePackage<\/strong><\/em> compiles the individual modules of the project and deploys a single package to the AEM instance. By default this package will be deployed to an AEM instance running locally on port 4502<\/strong> and with the credentials of admin:admin<\/strong>.<\/p>\n\n\n\n
        4. Navigate to Package Manager<\/strong> on your local AEM instance: http:\/\/localhost:4502\/crx\/packmgr\/index.jsp<\/a>. <\/p>\n\n\n\n
        5. You should see three packages for wknd-spa-vue.all<\/code>, wknd-spa-vue.ui.apps<\/code> and wknd-spa-vue.ui.content<\/code><\/p>\n\n\n\n
        \"\"
        AEM Package Manager
        <\/figcaption><\/figure>\n\n\n\n
        All of the custom code needed for the project will be bundled into these packages and installed on the AEM runtime.<\/p>\n\n\n\n
        6. You should also see several packages for spa.project.core<\/code> and core.wcm.components<\/code>. These dependencies are automatically included by the archetype. More information about AEM Core Components can be found here<\/a>.<\/p>\n\n\n\n
        spa.project.core<\/code> is a dependency needed to generate the JSON model API that the SPA Editor expects.<\/p>\n\n\n\n
        Author Content<\/h2>\n\n\n\n
        Next, open the starter SPA that was generated by the archetype and update some of the content.<\/p>\n\n\n\n
        Navigate to the Sites<\/strong> console: http:\/\/localhost:4502\/sites.html\/content<\/a>.<\/p>\n\n\n\n
        1. The WKND SPA includes a basic site structure with a country, language and home page. 

          This hierarchy is based on the archetype\u2019s default values for language_country<\/code> and isSingleCountryWebsite<\/code>. These values can be overwritten by updating the           available properties<\/a> when generating a project.<\/li><\/ol>\n\n\n\n
          2. Open the us<\/strong> > en<\/strong> > WKND SPA Vue Home Page<\/strong> page by selecting the page and clicking the Edit<\/strong> button in the menu bar.<\/p>\n\n\n\n
          3. A Text<\/strong> component has already been added to the page. You can edit this component like any other component in AEM.<\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          4. Add an additional Text<\/strong> component to the page.<\/p>\n\n\n\n
          Notice that the authoring experience is similar to that of a traditional AEM Sites page. Currently a limited number of components are available to be used. More will be added over the course of the tutorial.<\/p>\n\n\n\n
          Inspect the Single Page Application<\/h2>\n\n\n\n
          Next, verify that this is a Single Page Application with the use of your browser\u2019s developer tools.In the Page Editor<\/strong>, click the Page Information<\/strong> button > View as Published<\/strong>.<\/p>\n\n\n\n
          <\/p>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          This will open a new tab with the query parameter ?wcmmode=disabled<\/code> which effectively turns off the AEM editor: http:\/\/localhost:4502\/content\/wknd-spa-vue\/us\/en\/home.html?wcmmode=disabled<\/a><\/p>\n\n\n\n
          View the page\u2019s source and notice that the text content Hello World<\/strong> or any of the other content is not found. Instead you should see HTML like the following:<\/p>\n\n\n\n
          ...\n<body>\n    <noscript>You need to enable JavaScript to run this app.<\/noscript>\n    <div id=\"spa-root\"><\/div>\n    <script type=\"text\/javascript\" src=\"\/etc.clientlibs\/wknd-spa-vue\/clientlibs\/clientlib-vue.min.js\"><\/script>\n<\/body>\n...\n<\/code><\/pre>\n\n\n\n
          <\/p>\n\n\n\n
          clientlib-vue.min.js<\/code> is the Vue SPA that is loaded onto the page and responsible for rendering the content.<\/p>\n\n\n\n
          However, where does the content come from?<\/em><\/p>\n\n\n\n
          1. Return to the tab: http:\/\/localhost:4502\/content\/wknd-spa-vue\/us\/en\/home.html?wcmmode=disabled<\/a>
            <\/li>
          2. Open the browser\u2019s developer tools and inspect the network traffic of the page during a refresh. View the XHR<\/strong> requests:<\/li>
          3. <\/li><\/ol>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            There should be a request to http:\/\/localhost:4502\/content\/wknd-spa-vue\/us\/en.model.json<\/a>. This contains all of the content, formatted in JSON, that will drive the SPA.<\/p>\n\n\n\n
            In a new tab open http:\/\/localhost:4502\/content\/wknd-spa-vue\/us\/en.model.json<\/a><\/p>\n\n\n\n
            The request en.model.json<\/code> represents the content model that will drive the application. Inspect the JSON output and you should be able to find the snippet representing the Text<\/strong> component(s).<\/p>\n\n\n\n
            ...\n\":items\": {\n    \"text\": {\n        \"text\": \"<p>Hello World! Updated content!<\/p>\\r\\n\",\n        \"richText\": true,\n        \":type\": \"wknd-spa-vue\/components\/text\"\n    },\n    \"text_98796435\": {\n        \"text\": \"<p>A new text component.<\/p>\\r\\n\",\n        \"richText\": true,\n        \":type\": \"wknd-spa-vue\/components\/text\"\n    },\n}\n...\n<\/code><\/pre>\n\n\n\n
            <\/p>\n\n\n\n
            In the next chapter we will inspect how this JSON content is mapped from AEM Components to SPA Components to form the basis of the AEM SPA Editor experience.<\/p>\n\n\n\n
            Congratulations!<\/h2>\n\n\n\n
            Congratulations, you have just created your first AEM SPA Editor Project!<\/p>\n\n\n\n
            The SPA is quite simple. In the next few chapters more functionality will be added.<\/p>\n\n\n\n
            Next Steps<\/h3>\n\n\n\n
            Integrate the SPA – Learn how the SPA source code is integrated with the AEM Project and understand tools available to rapidly develop the SPA.<\/p>\n","protected":false},"excerpt":{"rendered":"
            *This article was modeled from the current Adobe React SPA documentation. Learn how to use an Adobe Experience Manager (AEM) Maven project as a starting point for a Vue application integrated with the AEM SPA Editor. Objective Understand the structure of a new AEM SPA Editor project built from a…<\/p>\n","protected":false},"author":2,"featured_media":558,"comment_status":"open","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\/489"}],"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=489"}],"version-history":[{"count":8,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/489\/revisions"}],"predecessor-version":[{"id":563,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/489\/revisions\/563"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media\/558"}],"wp:attachment":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media?parent=489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/categories?post=489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/tags?post=489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}