Final Project due May 6 7:59pm
To deploy your web application means to put it on a Web server so others can access it via the internet. We will deploy frontend on Firebase and backend on Heroku.
To deploy to Firebase enter the following commands into terminal:
yarn build will create a
build directory containing a production build of your application.
firebase login will prompt you to log in by opening up a web browser if you're not already signed it.
firebase init will ask you the following questions:
- Which Firebase CLI features do you want to set up for this folder? Select Hosting.
- Associate with a Firebase project. Select your Firebase project
- What do you want as your public directory? build
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
firebase deploy will push your build assets to Firebase remote server and give you a URL to your live Firebase app site! Now you can share this site and access it over the internet.
We will deploy backend on Heroku because deploying on Firebase is much more involved
You can then use the url generated as your backend endpoint in your frontend code.
One of the best parts about Firebase is you can use Sign in with Google/Facebook/GitHub/etc! This way you don't have to deal with usernames and passwords yourself!
We did a Live Coding Demo here based on the Songs example from last week. I will include the files changed here.
To handle authentication we made a wrapper component
Authenticated to handle all Authentication:
We then wrap our whole
SongList app in
If the user is logged in,
SongList will show. Otherwise they will be asked to log in.
We then deployed this app on Firebase for the frontend and Heroku for the backend. Refer to the commands above.
TypeScript allows us to add type information!
x, s, b? What should I pass in for those? What should I expect returned?
Adding the TypeScript types makes this code self-documenting:
None of these variables have to be any specific type! I can have
str be a string and then a number.
In the end, we want to use TypeScript because it is:
- Easier to read
- Easier and faster to implement
- Easier to refactor
- Less buggy
We can also use
const but again no
Any is a wildcard and it can be anything.
any places no restrictions on type.
If you were to use
But it can be useful in specifying collections of items of different types!
Functions can have types too!
myFunc has type
(x: number, y: number): number.
TypeScript can do some limited type inference so if you leave out the return type
number, TypeScript can infer it since we are just adding two numbers which can only produce a number. If TypeScript can't infer the type, it defaults as
We can also have optional parameters:
github as an optional parameter that defaults to
Literal Types are types that can be a literal set of possibilities that you specify. TypeScript allows number and string literal types:
Any variable with
TrafficLightColors type can only take on values
"red", "green", "yellow".
With union types, a variable can be of one type or another type.
With union types, a variable must be of one type and another type.
Type inference is determining type information without being told explicitly. TypeScript has limited type inference capabilities. If it can't infer the type the default is
Sometimes type inference is easy:
Other times it involves some more advanced reasoning:
What are the types of
a, b, c and what is the return type?
b should be a number because we are adding 1 to it. Knowing
b should be a number,
a should then be a function taking in a
number and returning a
boolean. Finally, this function returns either
b is already a
c must also be
number. Thus the return type is
We expect the following types:
In reality TypeScript infers the following:
You can learn how to add TypeScript to your Create React App application here.