Home
Jamstack Explorers
Menu

Angular Dynamic Data with Sanity.io with Tara Z. Manicsic

Deploying to Netlify

Let's take this project live. We'll use the Netlify CLI tools to connect this project to Netlify. In doing so, we'll also be adding CI/CD so that every time we push a new commit it triggers a new build!

📓 Resources 📓

TRANSCRIPT

[00:00:00] Now we're going to hook a project up to Netlify, and so not only can we see what it looks like live, how our users will see it, but we can take advantage of the continuous integration, continuous deployment CI/CD so that any time we use Git to push our code up we can get a deployed preview and we can just see our site built live without us doing anything besides pushing up that new code.

This we're using a template, we already have a Netlify.toml file, which is the configuration file that tells [00:00:30] Netlify how to run it and where it lives. We'll go ahead and install the command line tools for Netlify using npm i for install Netlify-CLI and -G to do it globally so we can use it for all of our projects.

Once we have that installed we can run the command NTL Login, which is for Netlify log in to connect to our account, authorize the CLI to use our information so that we can [00:01:00] find all of our projects and then we will run Netlify in it.

Again, you can use Netlify or NTL. We're going to create a new project in My Team. We're going to name it Angular Sanity. We see that it's set up and it sees the information from our Tamil for that command and the build. There's a great shortcut that I use constantly, the command at Netlify Open will actually open [00:01:30] up your web browser and show you what your project is doing on your Netlify dashboard. We can see that we have it build in because we ran Netlify in it and we can see the deploy logs of what's actually happening with our build bot in Netlify and running the commands for NPM pre-render which is the angular universal build and pre-render the site. Then eventually, we will see that it is published [00:02:00] and once it's published, you will see the link right there in green at the top of the page. We can click to actually go see the deployed version of our site and there it is. Yay. It does exist.

Again, this is the app shell. All of these pages are pre-rendered so you could check that part of it out, but most importantly we see that it's working. Let's go ahead and carry on with our Git workflow by doing GS for git status to see what we've changed, [00:02:30] GA for git add everything. I'm sorry, these are my aliases. Let me write this all out. Get status.

Now that everything is added we should have all those new files and then we'll get commit -M to add a message and we're going to go do a Git push, set upstream since it's the first push we're doing. This should have triggered a build so we'll just open up the dashboard and show you that yes, in fact, it triggered the build and told you to get commit message of that commit. [00:03:00]

[00:03:01][END OF AUDIO]

Explorers

your progress

29