Tailwind Logo

Creating a Tailwind CSS Sample Site with XM Cloud - Part 3 Protecting .env Files

XM CloudHeadless SXA

Published: 2024-06-25

I have been wondering how best to handle .env files when introducing Tips on the blog, but I will reflect this since it was introduced in XM Cloud Tutorials #4.

The following YouTube videos are available for your viewing.

.env files

This file is required to run XM Cloud locally. However, since this file contains the key for local use, it is dangerous to publish it on GitHub.

So the above video takes the following approach.

  • Create .env.template using .env file
  • Remove environment-specific keys from .env.template
  • Remove .env from GitHub repository
  • Add .env files in .gitignore
  • Update init.ps1, create new .env from .env.template, initialize environment

Now we will actually check the above procedure.

Creating .env.template

First, create .env.template by copying the .env file. Then, delete the following items defined in the .env.template file. The target items are slightly different from the YouTube video, but we will check the items that will be changed when executing init.ps1 and set them to the following items.

  • SITECORE_ADMIN_PASSWORD
  • SQL_SA_PASSWORD
  • REPORTING_API_KEY
  • TELERIK_ENCRYPTION_KEY
  • MEDIA_REQUEST_PROTECTION_SHARED_SECRET
  • JSS_DEPLOYMENT_SECRET_xmcloudpreview
  • SITECORE_API_KEY_xmcloudpreview
  • JSS_EDITING_SECRET

The .env.template is now ready to be prepped.

Delete .env files

The next step is to remove the .env files from the GitHub repository. First, delete the .env files from your local environment, which at this stage looks like this when viewed in Visual Studio Code

create-tailwindcss-sample-14.png

For .env file deletion, run Commit + Push to remove .env files from the GitHub repository.

create-tailwindcss-sample-15.png

If you access GitHub, you will see that the file has been deleted.

create-tailwindcss-sample-16.png

Updating .gitignore

In the future, to prevent .env files from being reflected in the GitHub repository when they are created, add the following line to your .gitignore file

Plain Text 
# Environment file .env
.env

You can now create an .env file and see that it is not reflected on GitHub because the file itself will be grayed out.

create-tailwindcss-sample-17.png

Update init.ps1

All that remains is to add the process of copying the .env.template as .env to init.ps1. Since the file needs to be created before the various processes, add the following code after the Add Windows hosts file entries, just like in the YouTube video.

PowerShell 
################################
# Create .env file
################################

Write-Host "Create .env file." -ForegroundColor Green
Copy-Item ".\.env.template" ".\.env" -Force

Now you are ready to go.

OPperation check

Now we will check to see if this change works correctly. First, delete the .env file and set the state to what it was before. Then run init.ps1.

After the .env file is created, use up.ps1 to confirm that it starts correctly. If XM Cloud starts locally after a while, the procedure for deleting the .env file is complete.

create-tailwindcss-sample-18.png

Summary

Since .env files often contain important information, if there is an initialization script, as in this case, it is recommended to handle the creation from a template there. This will make it easier to share the source code in the Public repository.

Tags