Setting up the project
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:05] Setting up the project. Unlike the projects in previous chapters, this project runs in the terminal instead of the browser.
[00:06 - 00:15] It will be an old JS application that will write in TypeScript. We'll use a custom React renderer called ReactBlessed to be able to render text-based UI in the terminal.
[00:16 - 00:19] To start, let's create a new folder for the project. We'll call it GitHubClient.
[00:20 - 00:21] Make. Dear.
[00:22 - 00:23] GitHub. Client.
[00:24 - 00:27] Go to this folder. And now run npm init to generate packet JSON.
[00:28 - 00:35] And PM init y. We add the y option so that it doesn't ask us to confirm the command.
[00:36 - 00:39] Alright. Now let's discuss how to run TypeScript in the console.
[00:40 - 00:44] There are two major ways to run TypeScript in the console. First one is to pre-compile TypeScript using TSC or Babel.
[00:45 - 00:53] And another one is to use TypeScript runtime like Dino, TSNOD or Babel node. We will use Babel node for development because it is easier to set up.
[00:54 - 00:56] Install the dependencies. We'll use Apollo client.
[00:57 - 01:05] To communicate with the GraphQL endpoint of GitHub. We'll use React and ReactBlessed to render the UI.
[01:06 - 01:10] We'll use React DevTools to debug our application. We'll need React Router for navigation.
[01:11 - 01:22] The open package. To open the URLs in the browser, keytar provides an abstraction on top of the keychains or password storage programs.
[01:23 - 01:30] Blessed renders the text user interfaces. CrossFetch will allow us to use fetch inside of the node environment.
[01:31 - 01:40] Doranf will allow us to load configuration from the .n files. And form data is needed to perform an auth request on GitHub.
[01:41 - 01:45] We'll have to wait a bit until the packages are installed. And then we need to install the dev dependencies.
[01:46 - 01:52] It is going to be mostly Babel and Babel plugins and presets. Install them.
[01:53 - 01:58] And then install the missing type definitions. We'll need type definitions for ReactBlessed and for React Router.
[01:59 - 02:05] Open the project in the code editor. Open package JSON and add a start script.
[02:06 - 02:08] It's going to be a Babel node. Inspect.
[02:09 - 02:13] We use it to enable the debugger as our C index. TSX.
[02:14 - 02:18] That's going to be our root file. And we specify the extensions that Babel node will need to process.
[02:19 - 02:24] And it's going to be .js.ts.jsx and .tsx files. For now we'll remove the test script.
[02:25 - 02:30] Add the .n file. In the root of your project, create a new file, call it .n.
[02:31 - 02:38] It will contain the configuration for our app. We'll need to store the client ID and the client secret.
[02:39 - 02:41] Paste here the keys that you got on the previous step.