Our marketing site will consist of a single page for unauthenticated users to land on. We will want this page to be SEO-friendly, but will not need to communicate with any downstream APIs, so the the only thing we need to set up for our marketing site is a standalone SSR Angular application. Let’s get started.
Setting Up the GitHub Repository
Since this is the first thing in our project we are setting up we need to first create our GitHub repository. So, if you haven’t already done so, create a GitHub account and create a new repository called “split-it”. Additionally, you are going to want to download GitHub Desktop to work on your local machine. Once installed, clone your repository to your local machine, make sure you have Visual Studio Code installed, and we will be able to open our project in our code editor. It should be a blank repository like below.
Installing Optional Tools
GitHub Copilot is one of the optional tools that I will be using. This is not something you need to use to follow along but could be helpful. If you decide to use it go ahead and set it up. You will need to purchase CoPilot, install the CoPilot extensions in Visual Studio Code, and enter your account information.
Setting Up Our Angular Application
Now it’s time to set up our Angular application. For this project, we are going to be working with Angular 19, which is the latest, so we are going to locally install this version in our application. Note you must be in the split-it directory when you run this command.
npm install @angular/core @angular/cli
Once installed we can create our app. Note that we do want to use SSR, routing, and basic CSS will work for our use case.
npx ng new split-it-marketing
We use npx because Angular is installed on our local project, not globally. Now that the app is created let’s go ahead and start up our application and make sure that everything is working as expected. Go ahead and cd into the Angular application and run,
npx ng serve
and once the application is built load https://localhost:4200 in your browser. It should look like below.
Our app looks like it is up and running correctly. Since we aren’t going to connect this application to our downstream APIs at this time I don’t think we need to create any environment files. We just need to install the UI library that we will be using which is PrimeNG.
Installing PrimeNG
PrimeNG is the UI library we are going to use for our project and we will end up installing it in all of our Angular applications. However, beyond just the UI library we are also going to use PrimeFlex and their icon library. Let’s install our dependencies.
npm install primeng primeflex primeicons
Next, in the angular.json file, add PrimeNG, PrimeFlex and PrimeIcons styles to the styles array:
"styles": [
"node_modules/primeng/resources/themes/aura-light-amber/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeflex/primeflex.css",
"node_modules/primeicons/primeicons.css",
"src/styles.css"
],
At this point we are all set up and ready to start building our page.