Hey there.
Everyone had their share.
And in the last video we saw a cliffhanger that our application got deployed to Heroku, but we were
not able to access it.
And what's the good of an application if you are not able to access it?
Everything was okay.
The deployed even said, Hey, it's all good, but we were not able to access it.
So let's go ahead and analyze what all going on wrong and where are the possible errors that can happen.
The first thing that I would like to bring your attention is actually inside the settings.
Now, as soon as you click on the settings, you're going to see all these locations and everything.
But the most important thing that you are going to see is revealed.
The config vars.
This is the most important thing that you always should look up for.
If I reveal this right now, there is nothing you can add more key value pairs.
If you remember, I told you that as soon as we go for this index or geez, there is something at the
top which says port 4000 or process dot EMV dot port.
Now let's go into the documentation section of the Heroku.
So I hope there is a you are all up here.
Yep.
Let's open this up and we want to look for this config vars also known as config variables.
And I'm going to go up here and I'm going to search for config.
Wars and.
There we go.
Configuration and config vars.
Okay.
Now what happened here is if you read a little bit on the documentation, it says that, hey, GitHub
actually uses a whole lot of settings.
If you have any variables that you can mention these into config vars for example, github username,
there is something else and especially this one will give you more idea.
Most of the in our application we install the package known as environment variables or process.
We'll do that in the next section, but it has a lot of variables like ports database URL and we write
them in the similar syntax which we saw up here, processed or DMV, then either the port name or database
URL.
So you need to mention this variable into the exact same place, which is key value.
So database as available and the value up here and these are secret files which are not exposed to your
application but into a very controlled environment and your application can access that only.
But the problem here is that Heroku doesn't allow you if you read more, Heroku doesn't allow you to
actually set the port because it's actually can be a security risk.
And we are saying that, hey, use port 4000 and if you don't find the port 4000, then use this variable.
So this order is actually reversed.
This should be something like this that you don't want to go like this.
You should be saying that process, invoice port or 4000 means that either use the port which is defined
in the process dot in the file.
In my case I usually don't define it process in the process, certainly because any of the application,
whether it's digital ocean or Heroku, they don't allow you to select the port, they govern their own
ports, or if you don't find them, then use 4000 or whatever the port you have mentioned.
Now this is one of the problematic situations.
So let's go ahead, fix this up and try to give it a push to the production.
So we're going to simply say, hey, we have done this one, so we're going to simply say get, ADD,
and all the changes are being tracked.
We're going to simply say, Hey, I want to commit this change, so let's go ahead and write this port
issue fixed and this is kind of a bug fix one.
Yeah, that's what it is.
Let's go ahead and do this once this is all done.
So our changes are being made.
Now I want to make this push to Heroku Master Branch.
Okay, let's go ahead and do this.
As soon as you're going to do this again, we can analyze all of the things.
All the logs are going to be there.
It will try to bring up our application and install and everything again.
Okay, let's go ahead and see how this is looking up now and let's see if the deployment is it's the
build in progress.
But since the application is like extremely small, it shouldn't take much of the time.
Let me see up the logs and there we go.
It says, deployed successful one more time.
Let's go ahead and see that.
It says, hey, I've deployed it.
Let's see that how the application is looking up.
If I open this up, it says again an application error.
That was quite a valid request.
But why this is giving me all these errors now you can go ahead and look for the activity and can see
all the logs up here as well.
And obviously we are seeing the logs into not here.
There is some place where you can find deploy logs.
Let me see that.
Not here, probably in the matrix.
Yeah.
Sometimes I have to look for them.
I might kind of find them.
Okay, so this is all done.
This is all good.
But why?
The application is still going wrong.
It should be up and running.
We have no mistakes now.
Yes, we have a mistake now.
If you remember in the package or JSON, we call that the node one is a dev dependency and we saw that
the dev dependencies are being pruned or being deleted.
And you are trying to run your start script by saying Node one index, where is it going to find the
Node one?
No, it's not going to find it.
So in this case, I have to say, hey, use Node to run this index or JS file.
Now the package JSON files are being all updated.
There are definitely more scripts that you can add and by default all of these application runs NPM
Start.
There should be a start script in your application, but there's definitely a lot more to discuss.
But right now let's just keep it this much.
So let's just say that git add everything and I want to commit it again.
So I'm going to use git commit and again providing a message that's saying kind of a node on change
to node and we're going to call this one as bug fix to yeah again track your bugs.
And once this is all being done, all being committed now let's go ahead and push this to Heroku Master
one more time.
And as you expected, this is going to be this is how the big bugs are being fixed for the very first
time when you put things into production.
And there is a whole lot of variables that you can see up here.
Everything plays a really important role.
And that's why usually the the operation roles are given to different people who are quite specialized
in that.
Okay, this shouldn't be taking that much of the time because we have cached being done and should be
any time up.
Let's go ahead and see them up.
And now let's go back to the overview and see this is deployed.
That was fast and this was deployed.
And now let's go ahead and see this.
I'm going to go ahead and click on Open Application and now I can see hello from LC here.
Yes, I know a couple of bugs, but they were deliberately introduced here to make sure that you understand
that putting things into production is not drastically different.
There are some obvious issues that might happen and let's go ahead and now try our application.
So let's go ahead and first go to my favorite Instagram and I can see it says, Hey, Instagram, I
cannot get Instagram.
So what is happening?
Why this is going on that you are not able to see this?
Now let's go ahead and see come back up here.
That why your application is just giving you this?
Let me go back up here.
Notice here, this is the URL and this is a very common mistake I've seen in the first version of this
course, which I taught personally to a lot of people, they get excited and they forget what route
they have to visit it.
That's why make sure you keep an eye on that.
So let's remove this Instagram and go up here.
And I promise you, this time this is going to work.
All these bugs are necessary for you to see.
But this plays an important role in understanding that how development can be tricky sometimes.
And then after that we will be going for LinkedIn and we get all the followers and everything on the
LinkedIn.
And what about my testing?
If I go ahead and do this, I get Natasha's params back.
What about if I just say learn code online?
Yes, I get that back a number.
Yes, that will be converted into string, but still I'll get that.
So that is the application.
And I told you this is how the application are being deployed.
One more thing, just as a side note in the settings, if you'll go a little bit at the bottom place,
you can actually use your custom domains.
You can just add your domain and something like API, dot or website, name or something.
This is all being done up here.
Okay, I told you, this is not really that much difficult to push your application to production and
congratulation.
This is the first course where in the very first section you have pushed an application to the production.
It is not complex, but it is still an achievement.
If you enjoyed this click after what you have pushed to the production, let me know on the Instagram,
share a story and I would definitely love to see what you have first to the very first thing in production.