- Okay, we are nearing our final stretch here.
There are just a few more things that we have left to do
before our app is truly hosted and publicly accessible.
So, one thing that we do have to do is that Heroku,
the way it works, is it relies on our applications
that we push up to provide two scripts for it.
One is going to be a start script,
you'll notice we don't have that yet.
And the other is a build script,
and we obviously don't have that yet either.
So what we're going to need to do, is add both of those.
Now, we're going to start off with the build script,
and this is what Heroku will call
before it actually tries to run our app.
So, one thing to note,
is that while we've been running our backend
with npm run dev,
which remember behind the scenes
actually does npx nodemon
and executes this babel-node command here,
that actually is not a recommended thing to do
when you're running a production application.
You see, babel-note is not optimized
to run in a production environment.
It's purpose is pretty much just to allow us
to write our code in modern JavaScript syntax,
and then see those results almost instantaneously
in development.
However, as I said,
we usually don't want to have that in production.
So what we're going to do then,
is we're going to add a build script
that will actually permanently transpile
all that code into a syntax that no JS can actually run.
So don't worry too much about this command here.
The command is just going to be babble, source
and then dash, dash out directory dot slash build.
Okay.
So basically what that's telling it,
is build all of the files in our source directory
and put them in the build directory once they're transpiled.
Okay, so now that we have our build script,
we're going to have our start script.
And our start script is going to look like this,
it's going to say node,
and then this is going to be dot slash build,
slash server.js.
So, in other words, once we've built our application
and put the results in this build folder,
we're going to run the start,
which will run node and run this server.js file
inside that build folder.
Okay.
So now that we've done that we are pretty much ready
to push our code up to Heroku.
And the way that we do that
is by first initializing a git repository in our backend,
which I've already done that myself,
but if you haven't,
you can do that by saying, git init.
And if you do that,
make sure you add a git ignore,
so that it doesn't push up the node modules.
All right.
So that's going to look like this.
I already have one here
that just has the word node modules in it.
And then what you're going to do,
is you're going to commit all your code by running,
git add dot.
And what that'll do is stage all of the files
that you've created since you first created the project,
so basically all of them.
And then we're going to say, git commit dash m,
with a commit message you can just say something like
first commit, if you want to and hit enter,
and that'll commit all of your code.
So now that we've done that,
the last thing we need to do is just run,
git push Heroku master.
And what that'll do is it'll take all our code
and push it up to Heroku and try and run it.
And if all goes well, which we hope it does,
then our app will be up and running on the internet
very shortly.
Okay.
And now let's go back to the Heroku console.
And remember when we ran Heroku create,
the name that it spit out, for me that was rocky spire.
Yours is going to be a different combination
of random words.
And we're going to click on that,
that's where we just pushed our code and that's what should
be running now.
And what we're going to do,
is we're going to click on this open app button,
and if all went well, we should see our app,
which is publicly accessible by the way.
So you should be able to send this URL to your friends
and they'll be able to visit your website
and see what you built.
So that's about it.
Congratulations for building and publishing
your first full stack website with view.