docs/src/content/docs/02-guides/01-terralith-to-terragrunt/03-setup.mdx
import FileTree from '@components/vendored/starlight/FileTree.astro'; import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
During the setup phase, you're going to:
Let's get building!
Create a new Git project where we're going to store the IaC for our live infrastructure.
mkdir terralith-to-terragrunt
cd terralith-to-terragrunt
git init
mise(Assuming you are using it) Use mise to download, install and pin the version of tools you're going to use in this project.
mise use [email protected]
mise use [email protected]
mise use [email protected]
mise use [email protected]
You should now have a local mise.toml file that looks like the following with all the tools pinned that you need.
import miseToml from '../../../../fixtures/terralith-to-terragrunt/mise.toml?raw';
<Code title="mise.toml" lang="toml" code={miseToml} />Now that you have the tools installed that are going to be used for this project, you'll want to setup the application we're going to be managing throughout the project.
It's not a very interesting application (it was vibe coded pretty quickly), and the details of how it works aren't that important to the topic of this blog post. Corners were also cut when designing the application to minimize the resources you have to provision, so don't design any of your applications based on what you see there.
First, create the application directory structure:
mkdir -p app/best-cat
cd app/best-cat
Next, copy the application files into the new directory you just created.
import packageJson from '../../../../fixtures/terralith-to-terragrunt/app/best-cat/package.json?raw'; import indexJs from '../../../../fixtures/terralith-to-terragrunt/app/best-cat/index.js?raw'; import templateHtml from '../../../../fixtures/terralith-to-terragrunt/app/best-cat/template.html?raw'; import stylesCss from '../../../../fixtures/terralith-to-terragrunt/app/best-cat/styles.css?raw'; import scriptJs from '../../../../fixtures/terralith-to-terragrunt/app/best-cat/script.js?raw'; import packageLockJson from '../../../../fixtures/terralith-to-terragrunt/app/best-cat/package-lock.json?raw';
<Tabs syncKey="app-code"> <TabItem label="package.json"> <Code lang="json" code={packageJson} /> </TabItem> <TabItem label="index.js"> <Code lang="javascript" code={indexJs} /> </TabItem> <TabItem label="template.html"> <Code lang="html" code={templateHtml} /> </TabItem> <TabItem label="styles.css"> <Code lang="css" code={stylesCss} /> </TabItem> <TabItem label="script.js"> <Code lang="javascript" code={scriptJs} /> </TabItem> <TabItem label="package-lock.json"> <Code lang="json" code={packageLockJson} /> </TabItem> </Tabs>You should end up with an app/best-cat directory that looks like this:
Once you have the app stored in app/best-cat, you'll want to create the dist directory, then package the application for delivery to a lambda function.
mkdir dist
cd app/best-cat
npm i
npm run package
I also recommend adding the following .gitignore file to your dist directory so you don't accidentally commit any other content in this directory to your repository:
# dist/.gitignore
*
!.gitignore
You'll also want some assets to use in this project to make it more fun. I generated a bunch of cat pictures using Gemini, but feel free to use stock photos or something else to generate the assets.
I would recommend that you place the images in the same location I did (dist/static), so that the convenience scripts I wrote work out of the box without modification.
This is what my dist directory looks like after following these steps:
Our end goal is to host a site that looks like this in AWS using these artifacts: