server, which is making use of Nitro. I believe there's an endpoint called API/hello. And I believe there's one called weather to grab the weather information from an external API. So for projects like this that are just Nuxt apps, services like Netlify and Vercel are pretty straightforward when it comes to deploying your app. So I'll make use of Netlify here, let's go ahead and add a new site, import an existing project. Let's grab it from our GitHub repo. And it's called LC Nuxt three example, I believe. Okay, there it is. Let's use this. We are going to deploy from the master branch, it automatically detected that it's a Nuxt three app, and the build command is correct. And also the publish directory is fine as well. So let's go ahead and deploy the site. Okay, so that's done after a few seconds. Let's try it out in the browser. And I don't think it's gonna work. Let's give it a try. And we do have this 500 error.

ahead and deploy the site. Okay, so that's done after a few seconds. Let's try it out in the browser. And I don't think it's gonna work. Let's give it a try. And we do have this 500 error. And that's because we haven't set up our environment variables. So if you go back to the project here, if you remember, we're making use of the back end and restoring the open weather map API key in here. So we need to set up environment variables on our Netlify server. So let's go ahead and do this. Let's grab the key and the value. So the key is open weather map API key. There should be a section here, site settings, I believe it's under build and deploy environment. And we can set our environment variables in here. So the key is this, the value is the actual key. paste that in. Let's save that. Okay, that's saved. And I believe we have to redeploy in order for the changes to happen.

the value is the actual key. paste that in. Let's save that. Okay, that's saved. And I believe we have to redeploy in order for the changes to happen. So let's go back to our deploy, or general or deploys. Actually, let's trigger another deploy here. Okay, that's done. And let's give it another try to refresh this. And now our app is working correctly. So our data fetching is working fine. Our weather is working fine as well. And let's try those endpoints. So we had /api/hello. And remember, this is the underlying Nitro server that's running on a Node server. And that works /api/weather should work as well. And everything looks fine. So again, if you just have a simple Knex app, and services like Netlify, and Vercel are great for hosting your project. Now for our blog application, we have a Laravel back end, and we have a separate

if you just have a simple Knox app, and services like Netlify, and Vercel are great for hosting your project. Now for our blog application, we have a Laravel back end, and we have a separate Knox front end. And these need to be running on the same domain in order for authentication and all the cookies to work correctly. So let's see if we can deploy this application and we'll make use of Laravel Forge to accomplish this. I've already gone ahead and set up Forge for the Laravel portion of our app. So if we go into my Forge account here, you'll see I set it up in knox-api.andre-demos.ca. So if we open this up in our browser, this is our Laravel app. And the endpoint should be working as well. So I believe there was an endpoint for grabbing all of the posts called api/posts. And there is information for all of our posts in the database. So let's see if we can get the front end portion set up on Forge as well. And we'll make sure that

all of the posts called API posts. And there is information for all of our posts in the database. So let's see if we can get the front end portion set up on Forge as well. And we'll make sure that front end is communicating correctly with this back end that we already have deployed, I am going to follow this documentation which I found, which has to do with deploying Knox to a Laravel Forge environment. It was written for Knox two, and it's a bit old at this point, but it did work when I tried it out. So let's go through this together. So there's some prerequisites here. Most of this stuff has to do with just having a Forge account that's hooked up to your GitHub account. And next, we have to make sure we have a somewhat recent version of Node. So there's instructions here, but I follow these instructions here. So you can run this command and update this file to whatever version you want to update to,

So there's instructions here, but I follow these instructions here. So you can run this command and update this file to whatever version you want to update to, then you can run sudo apt update. And then you can run this command to upgrade your node version on your server. So I've already done that. You can see the Laravel app is running here. And if I check out my node version, you can see that it's running version 16. And obviously also NPM. Next, you want to make sure you have PM2 installed, which is a node process manager and tries to keep your node app running at all times. So again, I have that installed already. If you don't, you can do sudo npm install -g pm2. And you can see the version that I have running here, since I already did that command. So now we can set up a new site in Forge. Actually, before I do that, let's go back to our Forge Laravel app, which we already have deployed.

that I have running here, since I already did that command. So now we can set up a new site in Forge. Actually, before I do that, let's go back to our Forge Laravel app, which we already have deployed. And I just want to show you some environment variables that you should have set. So if we go into environment here, we can view the .env file directly right here. Or it's really here. And just make sure to set your APP_URL. And you can see I already have it set to this domain here. Make sure you have your front end URL set. So wherever the front end is going to live, make sure you have that set as well. And also make sure you have your SESSION_DOMAIN set. This is to make sure that cookies work across sub domains. And I didn't do that locally because it just worked. But if you take a look at the sanctum documentation, somewhere down here, you can see that it says you need to do that in order for cookies to

do that locally because it just worked. But if you take a look at the sanctum documentation, somewhere down here, you can see that it says you need to do that in order for cookies to work correctly. So in config/session.php, make sure to set that. So session, oops, that's the wrong app. Right here, you can see it's making use of an environment variable. And I have that set here in Forge. So make sure it works across this domain here and any subdomains. Okay, so now let's create a new site. So let's go back to the actual server. Let's create a new site like the documentation says here. So it's going to be a static site and the web directory is just / and we can leave this unchecked. So let's do that. And close this, we can close this as well. And let's go here. So the domain is going to be nuxt.andredemos.ca. And you saw that the Laravel app lives on nuxtapi.andredemos.ca. Okay, the project type is static. Web directory is

And let's go here. So the domain is going to be nuxt.andredemos.ca. And you saw that the Laravel app lives on nuxtapi.andredemos.ca. Okay, the project type is static. Web directory is /. And this is fine. So let's go ahead and add this site. Next, we have to set up our GitHub repo. So let's go ahead and do that. So it's a git repo. It's from GitHub, the repo is dre himself/lcnuxt3blog. So let's add that nuxt3blog. We're not making use of composer here. And the branch is master. Okay, so let's go ahead and install this repo. Okay, that's done. What's next? Next is SSL. Again, Forge makes this really easy. Just go to SSL here. We can make use of let's encrypt. And we can just add one here. Okay, that should be done. What's next? Next, it says to enable quick deploy if you want to do that.

Just go to SSL here. We can make use of let's encrypt. And we can just add one here. Okay, that should be done. What's next? Next, it says to enable quick deploy if you want to do that. Go ahead and do that. Actually, it should be within app. Enable quick deploy. So every time we push to our git repo, then it should deploy the app. Next is our deploy script. So let's copy all of this and replace NuxtForge with our domain. So back to Forge. Let's get rid of this. Let's paste this in. Let's replace this with our domain or our folder. So nuxt.andre.demos.ca. We're checking out the current branch. We're pulling from master, we're installing any dependencies. And when I did this earlier, I just did npm install without the production flag. And then we're running the build command, which builds our Nuxt project. And again, you can see and again, you can see that within our Nuxt project here in the package.json, sorry, not here,

you'll see that we have this base URL. So we didn't have to repeat ourselves every time we made an API call. So for development, this is our base URL. But for production, obviously, it's going to be different. So let's grab this. And let's create an environment variable on our server. So I believe you can do this in Forge, just like we did for our Laravel app within .env. But I'm just going to do it on the server directly. So if you list our folders here, there should be that new one for our front end. Okay, there it is next.andre.demos.ca. And let's go ahead and create that environment variable. So let's make that let's paste in our base URL. And it's updated to our deployed back end. So https, what was the next API.andre.demos.ca? Okay, let's save that. And let's double check that it's in Forge as well. So if we go to environment, you can see that base URL right there. Okay. So back to app. I believe we just have to deploy it.

Okay, let's save that. And let's double check that it's in Forge as well. So if we go to environment, you can see that base URL right there. Okay. So back to app. I believe we just have to deploy it. Let's double check the docs here. Yep, just says to hit deploy. And there's one more step after this to set up PM2. So it always restarts after we make a deploy. So first, let's deploy and see if this works. So back here, let's go ahead and deploy now. Hopefully, I did everything correctly. So it looks like the deploy did work correctly. So let's try opening this up in an incognito window, just to make sure there are no cookies set because I did try this earlier on. So let's open up an incognito here. Let's paste that in. And it looks like it does work. So we do have communication with our back end, you can see our posts here. If we go to a post that should bring up the single post page. All these other pages work as well. And let's see if auth works. So let's

can see when we first ran it, we gave it a name. And now we're just referring to that site as a name here. So let's go ahead and do that within Forge. Let's just comment this out and paste that in. Obviously, let's change this to Nuxt.AndreDemos.ca. Let's update this. And let's go ahead and see if we can make a change locally and push that up to our servers, just to make sure that pm2 is still running, and everything still shows up on our server. So let's go into our app here. Let's just make a change on our about page. Let's say testing. In caps, let's save this. Let's deploy this or push it to GitHub. Let me just stop this. So we have a change here. Let's git add git commit testing changes. git push origin master. That should trigger a deploy in Forge. And you can see that it's deploying automatically here. Okay, it looks like it's done. Let's double check that that did update.