蜜豆视频

Transcript

Let鈥檚 look at how we can update the site with brand specific styles. Now our site came with some predefined styles as part of the wireframe template. In this video, we鈥檒l look at how we can update those theming sources and code against the live AEM environment. In order to code against the live AEM and author environment, we need to create a local user for authentication. This should only be done on development environments and should be avoided in production. From the AEM start screen, I鈥檒l navigate to Tools, Security, Users. This is the user management screen. From here, we can create a local user. Again, this local user is just for development purposes. In production, only IMS authentication via an 蜜豆视频 ID should be used. For ID, I鈥檒l name it dev-author, and then I鈥檒l set it a password. Next, assign the local user to the authors group, so they鈥檒l have permission to log in, view, and edit pages. Then save and close the changes to the new user. Next, let鈥檚 look at how we can begin to modify the theme sources for our site. So first, I鈥檒l start by navigating to the Sites console. Next, I鈥檒l select the weekend site. And in the left rail, I鈥檒l select Site. Here, we鈥檙e presented with an option to download the theme sources. And by downloading the theme sources, we can begin to customize the site using just front-end code. I鈥檒l download the theme sources, which is a zip file to my local file system. And unzipping the file, we can see the contents. Now, this is a traditional front-end project built using Webpack. Let鈥檚 go ahead and open it up in Visual Studio Code. This is the editor IDE of choice, but you can use really any IDE. And when you open up the README for the project, you can see information about the project, as well as build and usage instructions. The source folder contains all of the front-end code used to style and script the site. The project is based on Webpack, and it makes use of various NPM libraries to compile the front-end code. Let鈥檚 go ahead and install the project using the command line. First, I鈥檒l verify that I have NPM installed and available from the command line. Version 6 or 7 will work. Then, I鈥檒l go ahead and install the project using the command npm install. Based on the dependencies listed in the package.json file, various libraries will be installed. .env is an environment variable file. Next, we need to update the .env file with the information about our AEM environment, so that we can connect to it. I鈥檒l go ahead and open up the .env file. And there are three variables that need to be updated. AEM URL points to your AEM cloud environment. AEM site points to the root of the website. AEM proxy port is the port used by our local proxy server. Now, if you鈥檝e downloaded the theme sources directly from your environment, these should be pre-populated. Okay, so that looks good. Next, we鈥檒l start a proxy server that鈥檚 going to proxy the HTML and content from AEM. In the readme, you can find the instructions, and the command is npm run live. This will open up a new browser window running on port 7000. And if that port鈥檚 already in use, it will use the next available port. Next, we鈥檒l use the local user account created earlier to log into the AEM environment. We need to use a local user account when connecting via the proxy. So my user was devauthor, and I鈥檒l enter the password. Notice that we鈥檙e now logged into the AEM environment as devauthor. Next, let鈥檚 go ahead and navigate to the magazine article we created earlier. So under Magazine, I鈥檒l open up the Ultimate Guide to LA Skateparks. Observe that when we open the window, we see the browser sync message. Browser sync is one of the pieces that enables a live reload of the page when we make changes. To review, we have all of the structural elements of our page in place. We鈥檝e got a two column layout, and we鈥檝e configured a majority of the components needed to populate the magazine article. However, it still does not have the weekend branding. Next, I鈥檓 going to view the page outside of the AEM editor environment by clicking Page Property Menu and View as Published. By viewing it as published, we鈥檙e simulating what the page will look like on the published environment. It鈥檚 also a lot easier to debug any CSS or JavaScript rules without the AEM editor interfering. I鈥檒l return to VS Code and rearrange these windows a bit so we can see both the page and our editor. The Theme Sources project uses Sass as a preprocessor for the compiled CSS. One of the advantages of Sass is that we can set variables and use them throughout different files in the project. Let鈥檚 start by making some changes to our variables file so that we can see these changes reflected in the browser. I鈥檒l update the background to be this hot pink color. Notice that when I save the changes, the terminal is recompiling the code. And then the browser is automatically reloaded with the updated styles. So this is pretty ugly and not the brand colors we are looking for. However, we can see that the live coding setup is working. Let鈥檚 revert that change and then start making some updates to the styles to match the weekend brand. So to start, let鈥檚 update the layout of this main container in the body beneath the header and above the footer. Using my browser鈥檚 development tools, I鈥檓 going to inspect the div for the main body of the magazine article page. If you recall from the previous chapter, we set the policy for this main container to include a CSS class named Main. And here we can see that this CSS class has been added to the container. Next, let鈥檚 update a CSS rule that targets the main container class. I鈥檒l return to VS Code. And under components, container, you can see a few different files for styling the container. There鈥檚 a file for container main. We鈥檒l go ahead and open up that file. We can see that we already have a rule populated. I鈥檒l update this rule so that the main container has a max width of 873 point. And I鈥檒l also set the margin to 0 space auto, which will center the div. I鈥檒l save those changes and return to the browser. Once the CSS changes are compiled and synced, we can now see that our rule has been applied and that the main container now has a fixed width. Let鈥檚 make another update. In our mockups, the footer has a black background with white text. Once again, I鈥檒l use the developer tools to inspect the markup. The experience fragment used for the footer has an HTML ID attribute set. And it is set to main dash footer. And you can configure this ID attribute for any component in AM. But it鈥檚 a good idea to use this sparingly. Since we know that the experience fragment footer will only be used once on a page, this is a good use case. Now, I鈥檒l open up my experience fragment underscore footer dot SCSS file. And you can see here we鈥檝e got a rule to target this ID of main dash footer. Now, in our mockups, the footer was dark and was really the inverse of the rest of the page text. So, we鈥檒l set the background color to color dash foreground so that we get the inverse effect. And then we鈥檒l set the color to color dash background. And we鈥檒l get a dark background with light text. Go ahead and save those changes. And then if we return to the browser, you can see we鈥檝e got the start of our styled footer. So, as a frontend developer, you鈥檙e basically repeating these steps until you have styled the different core components and containers to match your brand鈥檚 mockups. Now, at some point, you might run across an element in your mockups that is unique and requires an additional CSS class. One of the great things about coding against the live environment is that you can make changes to the template and various policies to introduce additional CSS classes as needed. To complete the weekend styles, I鈥檓 going to take a shortcut. Below this video, you鈥檒l find a zip file that you can download with the finished source files for the weekend site named weekend dash theme dash source dot zip. Go ahead and unzip this. And then I鈥檒l replace the source file that was in my theme sources project. I鈥檒l reopen VS Code. And I can see that the variables file has been updated. And under components, you can inspect the different files to see the different changes. I鈥檒l go ahead and restart the proxy server by running npm run live. And when I return to the browser and view the skate park magazine article, I can see the final styles have been applied. So this looks much closer to the weekend mockups and that original wireframe theme has pretty much disappeared. So this looks great. Note to see the full changes, you may need to restart your browser and possibly clear out your cache. In VS Code, feel free to inspect the changes. You鈥檒l notice that some icons to support the weekend site have been added. We鈥檝e also replaced some of the fonts in favor of web fonts, and we鈥檝e updated the styles for individual components. Now, currently, these changes are only visible using our local proxy server. Next, we鈥檒l look at how to apply these updates to the actual AM environment.

Transcript

At this point, the customized styles for our site are only visible via our local proxy server in our dev environment. Next, let鈥檚 use Cloud Manager鈥檚 front-end pipeline to deploy our customized CSS and JavaScript files into our AM environment. The author environment I鈥檝e been working in so far is part of a larger Cloud Manager program. And Cloud Manager provides critical administrative functions over one or more AM environments. And so far, I鈥檝e been working in an author instance as part of a dev environment. Now, all code updates flow through Cloud Manager鈥檚 CI CD pipelines. So we鈥檝e got non-production pipelines targeting dev environments and production pipelines targeting stage and prod environments. Now, you can also have different flavors of code that gets deployed by a pipeline. The most common is a full-stack pipeline, which is going to deploy both front-end and back-end code. So it鈥檒l include things like Java code, OSGI bundles, servlets, along with the front-end code like CSS and JavaScript. With Cloud Manager, we have the option to use a dedicated front-end pipeline, which only deploys CSS and JavaScript. And the advantage of the front-end pipeline is that it鈥檚 a lot faster to deploy the updates, and for projects like ours, where we only have CSS and JavaScript changes, it鈥檚 going to be a lot more efficient. So that鈥檚 what we鈥檙e going to do next. Now, before we set that up, I鈥檓 going to create a new Git repository just for our front-end assets. All Cloud Manager programs will come with at least one Git repo, and you鈥檙e, of course, welcome to use it. I find that in cases like this, it鈥檚 easier to create a dedicated front-end repo just for our theme sources. So I鈥檒l click into repositories and click Add repository. I鈥檒l name it weekend-frontend-theme, and I鈥檒l give it a short description. I鈥檒l save these updates, and Cloud Manager will now create my new Git repository. This usually takes a couple minutes, and once the repo has been created, we can view the details about it. I鈥檒l then return to Visual Studio Code and my front-end theme sources folder that contains the CSS and JavaScript customizations. I鈥檒l go ahead and open up a terminal window. So if you recall, my front-end theme sources is just a plain old folder that we downloaded earlier. Next, we鈥檒l take all the files and folders in this project and commit it to our Git repository. So I鈥檒l run the command git init-b main, and that鈥檚 going to initialize this folder as a Git repository, and the branch that we鈥檙e going to be using will be called main. Next, I鈥檒l run the command git add dot, and this is going to include all of the files beneath the current directory. I鈥檒l next run the command git commit-m, and the message I鈥檒l put in is initial commit, and this is going to commit my first change. All right, so now we want to push our changes to the Cloud Manager Git repo we created in the previous step. I鈥檒l return to Cloud Manager, view the details about my target repo, and copy this URL. Back in my front-end theme sources folder, I鈥檒l type in git remote add origin, and then paste the URL to the Git repository. Finally, I鈥檒l push the changes by typing in the command git push-u origin main, where origin is my Cloud Manager repo, and main is the branch. Dash u means that my local branch will track changes with the Cloud Manager branch. Next, I鈥檒l return to Cloud Manager and navigate to pipelines. We鈥檒l add a new pipeline, and this will be a non-production pipeline, since we鈥檙e targeting my dev environment. The type of pipeline will be a deployment pipeline, since we鈥檙e going to be deploying code, and I鈥檒l give it the name of weekend front-end theme so we can easily identify it in the UI. I鈥檒l leave the rest of the options set to their default. Now, in the next step of the wizard, under source code, I鈥檓 going to choose front-end code as the type of code we will deploy since we鈥檙e deploying just CSS and JavaScript. I鈥檒l go ahead and select my dev environment, and under source code, I鈥檒l select my weekend front-end theme repository, and I鈥檒l select the branch main, which we just pushed up. There is an optional setting to specify a relative folder for the front-end location, and in this case, our front-end project is the entire branch, and it鈥檚 already located at the root, so we can leave the settings set as default. We鈥檒l go ahead and save the changes. So now I can see our new weekend front-end theme pipeline, and it鈥檚 been created. And if we go to the program overview, you can see our front-end pipeline, and we can go ahead and kick it off. We can check the progress by navigating to activity and view details. Here we can see that it鈥檚 deploying code from our weekend front-end theme repository and our main branch, and that the latest commit is this hash ID. We can also verify that this is the latest commit we have pushed by returning to the command line and running the command git log dash dash one line. And there we can compare the two hashes, so you can see that this 5C, 7C4 matches what鈥檚 in Cloud Manager. All right, so the front-end build is pretty fast, only five or six minutes, but I鈥檒l go ahead and fast-forward the video to when it has completed. So the pipeline has finished, and we could inspect the build and deployment logs for more details about what was built. All right, so let鈥檚 go ahead and check out our changes. I鈥檒l navigate to my AEM author instance. That鈥檚 part of my dev environment. And under the Sites console, I鈥檒l go ahead and open up the LA skateboarding article. So now this is opened, we can see the updated weekend branding styles and colors have been successfully applied. And while it鈥檚 not totally perfect, but it鈥檚 a really good start, and we can verify that all of our CSS and JavaScript customizations have been applied. Let鈥檚 pull back the covers a bit and inspect the inclusion of our JavaScript and CSS files that were deployed via the front-end pipeline. Once again, I鈥檒l view my page as published. And then I鈥檒l inspect the source code. So you can see in the HTML header that these CSS and JavaScript inclusions have an href that鈥檚 prefixed with static-p, and some numbers, and then e, and some additional numbers. And those numbers indicate the program and environment that we鈥檙e on. So our front-end files, the compiled CSS and JavaScript have been deployed directly to the CDN for our program and environment. And then the AEM page simply directly references these deployed files from the CDN. And if we run the front-end pipeline again, the hash for those front-end files would be updated, and then the updated files would be referenced by the page in AEM. Now traditionally, CSS and JavaScript files in AEM have been deployed as client libraries, which live in the AEM content repository. Client library files end up getting cached and delivered at the CDN layer, so there鈥檚 really no difference in terms of performance. The advantage of using the front-end pipeline is that it can run faster and with a much shorter life cycle. The other advantage is that there鈥檚 minimal AEM knowledge needed in order for a front-end developer to be able to write and deploy code using the front-end pipeline. So that鈥檚 it for this video of deploying our CSS and JavaScript customizations using Cloud Manager鈥檚 front-end pipeline. Thanks.