Okay, so we've had a successful deployment that didn't actually change anything.
If I go back to my published application and I just refresh this page, we might see a bit of a delay
as the application would have restarted whilst we go and load our application for the first time.
But if I go and take a look at the order details, well, this hasn't changed.
I've still got the same problem inside here because the updated code did not get deployed.
So that's what we're going to take a look at now.
And we'll go back to VS code.
And let's close these down and inside our File Explorer.
What we don't have at this moment in time is the GitHub folder or the workflow that Azure created for
us.
So we need to pull that down from GitHub.
So I'm just going to go to the version control tab.
And if we click on the ellipses here we should be able to click the pull.
And this is going to pull the changes from GitHub into our code.
And if I go back to the File Explorer now now I've got the GitHub folder inside here, the workflows
and the workflow that we were looking at on Azure.
And do we want to install this extension.
I'll leave that up to you.
It can be helpful.
It will give you some intellisense and so on and so forth.
I feel I've got enough extensions for the time being, so I'm just going to ignore that prompt.
So we want to make a change or two inside here.
And what I'd like to do is be able to publish or build our react application as part of this workflow.
And we can do that inside here, because we're effectively running this workflow on a windows machine.
We can use windows functionality.
So we can set up node on this little server.
And then we can use node to use npm to install our packages and build our application.
So inside here we need to do this after actions checkout because this is checking out our repository
from GitHub.
So below this step I'm going to add a dash And give it a name and say set up Node.js and below.
Name.
I'm going to say users and we're going to use a specific workflow.
From the workflow marketplace, which is what these effectively are.
There's code inside here that have the ability to check out our code.
So we don't need to write that manually.
We're just using a pre-created action that somebody else has already created.
And we're going to do the same here as well.
We're going to use a workflow called setup dash node at v3.
And then below users we can specify with.
And then I'm just going to use node dash version colon and 20 as that is compatible with what we're
doing here.
So once we have node we can then use node.
So below the setup node job I'll add another dash and give this a name and just say install deps and
build client Its app.
And inside here we can use a run command, which effectively uses a windows terminal or command prompt.
So we add a pipe because we're going to have multiple lines.
Then we're going to CD into the client because we're going to be working at the level of our solution
at the moment.
So just like on a client, if we were going to do the same thing.
So do be aware that you're not going to get any help with this.
If you've called your client application something else, then you need to specify the name of that
folder.
So I'm working at the level of the solution.
So I'm going to CD into this folder the CD client.
Mine is called client.
So that's what I'm seeding into.
Below the CD client we can then just use npm install as we need to install our client packages.
And then we can use npm run build, which is going to use the V8 tools to build a production version
of our react application.
Once that's finished its build, then it's going to output the updated react code into our W-w-w root
folder inside the API folder.
So that's going to include the latest changes that we've made in development.
And the rest of this can stay exactly the same.
So we've already made the code changes that we're going to deploy.
We've now updated our workflow.
And this is going to be the final action that we do inside this section.
We do have another section coming up to deal with admin functionality.
But just because we've deployed our app doesn't stop us from enhancing our application.
And with this continuous integration, all of our changes, well, when we do commit them to GitHub,
we're effectively deploying them to our production environment.
So that's the way we're going to approach this.
But we'll now in order to deploy our updates to our app, all we need to do because of the configuration
setting inside here on push to the main branch, and because we've got this push to the main branch
as one of the workflow triggers when I I'd commit my changes here.
This is going to then kick off that workflow and hopefully deploy our changes to Azure.
So to make this happen, then all we need to do is commit our changes.
So I'm going to stage the changes and then I'm going to say end of section 12 as this is the last thing
we're doing inside this section.
And I've got my two changes.
It's going to update the app, I've got the YAML file, I'll commit these and I'll sync these up with
GitHub.
Now what should be happening now if we go back to the browser and we go back to GitHub and we go back
to actions, what we should see is that we've got our end of section 12 commits.
And this has kicked off the workflow.
So we're going to build and then we're going to deploy.
Now this probably will take a few minutes because we've also got to build our react application as part
of this step.
So I'll pause the video and then I'll come back when it's either completed successfully or it's failed.
And it did indeed fail.
And if we go and take a look at the build and we can go and take a look at what the error is that we
received here, and it's the standard error.
I forgot that I was using react 19 release candidates, and when I use npm install, if I do not include
that legacy dependency or legacy peer deps switch, then we get this kind of error.
So it failed at the client stage.
So okay fine, we've got a failing workflow, but it's pretty obvious what we need to do to fix this.
So I'm going to go back to the code.
And all I need to do to resolve this particular error is add on where I've got the npm install we have
to continue to use.
And I'm just going to copy that from the error actually.
So I don't make any typos in this file because I'm not going to get any help with this.
We need this switch, so I'm just going to copy it into my clipboard, head back to the code and paste
it in here.
And we have to have this.
If we're on a beta release candidate version of react then this is required.
So not quite what I was hoping for.
Now I've got another change to commit to GitHub and I'll stage this change and I'll say end of section
12 updated and I'll commit and I'll sync the changes again.
So hopefully this time that will resolve this issue.
So I'll come back to GitHub and I'll go back to the actions.
And we've got our next workflow or the next version of this workflow underway.
So once again hopefully this time it should work.
And I'll pause the video and come back once it's either succeeded or it's failed.
And we have success.
This built and deployed successfully, and we can go and check the logs and see what happened inside.
Here you can take a look at any specific part you want to take a look at.
If we take a look at installing dependencies and building the client app, this is new.
So we can see what's going on inside there.
And it's pretty much the same output that we saw when we built this manually inside our application.
And it deploys it to that API folder.
Then it goes through the rest of the steps and we've seen those before.
And then we get our deployment steps.
And brilliant this now works.
We do have one small warning here.
Something about the output option isn't supported when building a solution.
Specifying a solution level output path results in all projects copying outputs to the same directory,
which can lead to inconsistent builds.
I'm not sure about that warning whether or not it's going to affect us.
We'll soon see anyway, because we're going to take a look at our deployed application and warnings
are not errors.
And this is specifically related to net publish, by the way, and this is the workflow that Azure give
us the same company that makes.
Net that we're using that provides the dotnet tools that specify an output directory.
So I'm not going to worry about this particular warning unless our application fails of course.
So I'll go back to our application and let's go back to the catalog.
Might have to wait a little bit longer the first time that we do this, because it does have to effectively
restart our application as well.
But let's go to the orders.
First of all, click on my orders and let's click on the order details.
Because what we'd like to see is that being updated to 600 MB.
That hasn't been.
Let me just refresh the page, because we might be dealing with a cached version of our application.
And in fact, because I've lost my login, that does suggest that it is a cached version of this application.
So let me refresh and it appears I do have some issues now because that isn't working at all.
So it does appear there's a problem with our deployment after all.
But what can we do about this?
We've got a loading flag that's not doing anything.
And let's go and take a look at the console, see if we can get any information here.
And it's telling us missing value for stripe API key should be a string.
And it looks like I've got some logging information left over here.
Parsing error okay.
That's interesting.
And it looks like we've got a bit of troubleshooting to do here because that's interesting.
And even though I was hoping that would be the end of this section, it looks like we've got something
to solve.
But that's not a problem, because troubleshooting our application on production is something that we
need to think about.
And in the next lesson, we'll take a look at what the problem could be with this.