Search⌘ K
AI Features
Home
Courses
Building User Interfaces and Functions with TypeScript and React

External Environment Setup

Explore setting up the external development environment by installing Node.js version 16 with nvm and scaffolding a TypeScript React application using create-react-app. Understand how to clean up boilerplate files to start with a minimal, ready-to-code project setup.

We'll cover the following...

Environmental Setup

If you are interested in running this course’s code in an external environment, like in Visual Studio Code, this lesson explains what tools are used to test and run all the code in this course.

Node version

We’re going to use Node version 16, since that’s the new, long-term support (LTS) version of Node as of June 2022.

Install nvm

We can use nvm to maintain a variety of node versions on a single machine. To install nvm, let’s open a terminal and issue the following command:

Shell
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Optionally, we can use this command:

Shell
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

After installing, be sure to check your ~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc, to ensure the following lines are appended:

Shell
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

These lines will load nvm and ensure it is in your environment.

Install Node version 16

Now, with nvm installed, we can install Node version 16:

Shell
nvm install v16

Omitting the minor and patch versions will tell nvm to install the latest version within the major 16th version.

If all goes well, something like this should appear in the terminal:

Shell
Now using node v16.15.1 (npm v8.11.0)

Additionally (and optionally), we can alias this to the default nvm version.

Shell
nvm alias default 16.15.1

Every time a terminal starts, nvm will use this as the default.

Scaffold the app with create-react-app

We’ll begin scaffolding our application by using create-react-app with its TypeScript template.

Shell
npx create-react-app typescript-generic-search-sort-filter --template typescript

When create-react-app is done scaffolding, we can cd into the folder it creates and open it in a code editor. Visual Studio Code is one of the most commonly used code editors for TypeScript. It installs with the shell command code. Like TypeScript, Visual Studio Code is part of the Microsoft ecosystem, and many developers use it. We open the code in Visual Studio Code with the command below:

Shell
cd typescript-generic-search-sort-filter
code .

Remove additional fluff

Let’s remove the extraneous materials that create-react-app adds to this app. First, in the src/ folder, delete the following files:

  • App.css
  • App.test.tsx
  • index.css
  • logo.svg
  • setupTests.ts

We can also delete the boilerplate text that create-react-app puts in README.md and add the following instead:

Markdown
# educative-advanced-typescript-generic-search-sorting-filtering
The code for the course on Educative, "Advanced TypeScript: Generic Search, Sorting, and Filtering"!

Then, we’ll remove the CSS import from index.tsx.

JavaScript (JSX)
import './index.css'

We should also remove the logo and CSS imports from App.tsx.

JavaScript (JSX)
import logo from './logo.svg';
import './App.css';

Finally, we clean up the render function to return Hello World!. In the end, our App.tsx looks like this:

JavaScript (JSX)
import React from 'react';
function App() {
  return <>Hello World!</>;
}
export default App;

Run the application

To make sure all our changes were correct, we can start the React application with the following command in the project root directory:

Shell
npm run start

If everything worked, we should see the following output in our terminal as well as some additional WebpackA library that acts as a module bundler. It is most often used to bundle JavaScript so it can run in the browser but also is able to bundle a variety of other data types. output, which should be about the size of each asset that was bundled.

Shell
Compiled successfully!
You can now view example in the browser.
  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.15:3000
Note that the development build is not optimized.
To create a production build, use yarn build.

At this point, our application should render just a simple, Hello World! with no styling.

View the example app

We can run an example app with everything we’ve done so far here:

# educative-advanced-typescript-generic-search-sorting-filtering

The code for the course on Educative, "Advanced TypeScript: Generic Search, Sorting, and Filtering"!
A create-react-app application with all extraneous material removed

Conclusion

In this lesson, we installed nvm and Node v16 to ensure that we have the correct environment for these lessons. Then, we scaffolded a React application using create-react-app and its Typescript template. Finally, we removed unneeded files from the template so we had a clean slate to start with. All the code and interactive code examples in this course are based on this type of blank-slate TypeScript and React environment.