Building a Lyric Blog with Nuxt.js and Strapi with Daniel Madalitso Phiri
Hey explorers. In the last mission, we delivered content from our Strapi API to our Nuxt application and built out our lyric blog. In this mission, we'll look at deploying our site to Netlify. Before we can do that, we need to make sure that our application can read data from Strapi, which means Strapi has to be accessible via the internet.
Throughout our mission, we've been working with Strapi locally to make sure that our application, when deployed to Netlify can read data from Strapi we have to deploy it into a production environment and Strapi being self hosted means we have to deploy it to a service like Heroku, digital ocean, or Microsoft Azure to mention a few. We use something called NG rock or N grok to create a tunnel from our localhost to an address on the internet.
So our application can pull data on build time when deployed to Netlify. To do this, we'll go into our API folder, where our Strapi application is and start our server with yarn develop.
Once also what is running on locals 1337. We'll open up another terminal and change directories into our API folder again. So we can run a tunnel using NG rock with the command N G rock HTTP, 1337. So we expose port 1337. Where our Strapi application is running and create a tunnel to a URL that will be given after we run the command.
Click enter and run the command and we get a URL that we can add to Netlify. When we deploy we'll change directories into our front end folder and we'll use Git commands we use git add to stage our files and then run, get commit, commit our files with the message deployment mission.
Then we'll use get branch minus M main to create a main branch for our get project. And then add a remote pointing to our, git repository, hosted on GitHub. And finally, we'll push our local changes so we can use and deploy our site on Netlify. And then we can use get push -u origin main to push our local changes to Github and then deploy our site from our Git repository onto Netlify.
Oops, get pushed. Great. When we check our Github repository. JAMstack explorers. Front-end. We see all local files here. And now that we have our application on Git, we can go to Netlify on app netlify.com/start we'll select GitHub authenticators, and then we can choose our repository type in the name of your repository.
In my case, that is JAMstack explorers front end, who choose a branch to deploy from all branch is the main branch I'll build command because we're building a static site will be yarn generate, and this will be published into our dist directory, and we want to add a variable for our Strapi backend.
We'll define a variable. Called back-end URL, which points to our strappy URL. Now, this depends on whether you're using a service like NG rock. Like we are in this mission, or you have deployed your application to another service like Heroku and have your own domain. Whichever option you go for, you have to paste the value to your backend URL here.
We'll get ours from NG rock and click deploy site. Once our building is done, we get a message saying our site has been published. When you scroll to the top, you get a URL. Ours is Epic Jelani six eight, five three, three dot notify the app, click on that. And now we have our static blog deployed on Netlify.
Let's add some bonus content to this mission. We'll use Strapi. You webhooks to trigger builds on Netlify to update our page whenever we add content into Strapi. To do that, let's start off you. Our Strapi admin we'll log back into our Strapi admin and then our settings section, we'll go to webhooks.
We'll click add new web book. We'll give them swim book and name of Netlify build webhook, and we need to get a URL for the webhook from our Netlify panel. So back to Netlify. If you go to site settings and the build and deploy, you see a section that says build hooks, click, add, build hook. And we'll name this strapi content update.
We'll push and build from the main branch and save this. We get back a URL. We'll copy this URL and paste it in our Strapi admin. And we need to define an event that will trigger this webhook. So whenever we create an entry, whenever we update, delete, publish, or, unpublished and entry. We want the webhook to be triggered.
We'll save this. And it says webhook created. Now to actually test this out, go to articles and we'll add in new entry, we'll create an entry titled final form and give this a date of 15 February description of a song by.
Sampa the great and pasting a body as usual, our slug has been auto-generated, we'll save this content and publish it, which should trigger our webhook we'll go to our Netlify admin and look at our deploys. You see a new deploy. That says, deploy, triggered by hook strapi content update. That means our application is rebuilding to reflect the changes.
We just made a Strapi, we'll wait for our build to finish. Once our build is finished, our site is published and when we check our lyric block, we see final form a song by Sampa the great appearing. Oh, a webpage. You can click that and look at the lyrics. Go back. And that is it. With this mission explorers, it's been an honor training you and I'm sure the galaxy is ready for all the creativity you unleash with your new found knowledge of Strapi and Nuxt js until the next time It's your commander, Daniel signing out.