The TypeScript Compiler Options Used in This Chapter
Name | Description |
---|---|
allowJs | This option includes JavaScript files in the compilation process. |
allowSyntheticDefaultImports | This option allows imports from modules that do not declare a default export. This option is used to increase code compatibility. |
esModuleInterop | This option adds helper code for importing from modules that do not declare a default export and is used in conjunction with the allowSyntheticDefaultImports option. |
forceConsistentCasingInFileNames | This option ensures that names in import statements match the case used by the imported file. |
isolatedModules | This option treats each file as a separate module, which increases compatibility with the Babel tool. |
jsx | This option specifies how HTML elements in TSX files are processed. |
lib | This option selects the type declaration files the compiler uses. |
module | This option determines the style of module that is used. |
moduleResolution | This option specifies the style of module resolution that should be used to resolve dependencies. |
noEmit | This option prevents the compiler from emitting JavaScript code, with the result that it only checks code for errors. |
resolveJsonModule | This option allows JSON files to be imported as though they were modules. |
skipLibCheck | This option speeds up compilation by skipping the normal checking of declaration files. |
strict | This option enables stricter checking of TypeScript code. |
target | This option specifies the version of the JavaScript language that the compiler will target in its output. |
Preparing for This Chapter
In this chapter, I continue to work with the reactapp project started in Chapter 19. Open a command prompt, navigate to the reactapp folder, and run the command shown in Listing 20-1 to start the web service and the React development tools.
Tip
You can download the example project for this chapter—and for all the other chapters in this book—from https://github.com/Apress/essential-typescript .
Starting the Development Tools
Configuring URL Routing
Adding a Package to the Project
The URLs Supported by the Application
Name | Description |
---|---|
/products | This URL will display the ProductList component defined in Chapter 19. |
/order | This URL will display a component that displays details of the order. |
/summary | This URL will display a summary of an order once it has been sent to the server. The URL will include the number assigned to the order so that an order whose ID is 5 will be displayed using the URL /summary/5. |
/ | The default URL will be redirected to /products so the ProductList component is shown. |
Configuring URL Routing in the App.tsx File in the src Folder
Completing the Example Application Features
Adding Navigation in the header.tsx File in the src Folder
The NavLink component produces an anchor element (an element whose tag is a) that navigates to a specified URL when it is clicked. The Bootstrap classes applied to the NavLink give the link the appearance of a button.
Adding the Order Summary Component
The Contents of the orderDetails.tsx File in the src Folder
In Chapter 19, I created a connector for an existing component so that it would receive props that are linked to the data store. In Listing 20-5, I have created a component that is always connected to the data store, which avoids the need to define a separate connector but does mean that the component can’t be used when the data store isn’t available, such as in another project. This component uses a NavLink to return the user to the /products button and invokes a function prop when the user is ready to send the order to the web service.
Adding the Confirmation Component
The Contents of the summary.tsx File in the src Folder
The Summary component only needs to know the number assigned by the web service to the user’s order, which it obtains from the current route. The routing package provides details of the route through props, following the established React pattern. The type declarations for the React Router package are used to describe the parameter that the component expects, allowing the TypeScript compiler to check types.
Completing the Routing Configuration
Adding the Remaining Routes in the App.tsx File in the src Folder
The Route component for the OrderDetails component uses the render function to select the component and provide it with a mix of props provided by the routing system and a callback function. The submitCallback method requires access to the routing features that are provided as props to components in order to navigate to a new URL, but these are available only within the Browser router component. To work around this limitation, I provide the OrderDetails component with an inline function that passes the routing props to the submitCallback method, which allows the history.push method to be used. The Route component for the Summary component defines a URL with a parameter that provides the order number to display to the user.
Deploying the Application
The React development tools rely on the Webpack Development Server, which is not suitable for hosting a production application because it adds features such as automatic reloading to the JavaScript bundles it generates. In this section, I work through the process of preparing the application for deployment, which is a similar process for any web application, including those developed using other frameworks.
Adding the Production HTTP Server Package
For production, a regular HTTP server is required to deliver the HTML, CSS, and JavaScript files to the browser. For this example, I am going to use the Express server, which is the same package I use for the other examples in this part of the book and which is a good choice for any web application. Use Control+C to stop the development tools and use the command prompt to run the command shown in Listing 20-8 in the reactapp folder to install the express package.
Adding Packages for Deployment
Creating the Persistent Data File
The Contents of the data.json File in the reactapp Folder
Creating the Server
The Contents of the server.js File in the reactapp Folder
The statements in the server.js file configure the express and json-server packages so they use the contents of the build folder, which is where the React build process will put the application’s JavaScript bundles and the HTML file that tells the browser to load them. URLs prefixed with /api will be handled by the web service.
Using Relative URLs for Data Requests
Using Relative URLs in the httpHandler.ts File in the src/data Folder
The URLs in Listing 20-11 are specified relative to the one used to request the HTML document, following the common convention that data requests are prefixed with /api.
Building the Application
Creating the Production Bundle
Testing the Production Build
Starting the Production Server
Containerizing the Application
To complete this chapter, I am going to create a Docker container for the example application so that it can be deployed into production. If you did not install Docker in Chapter 15, then you must do so now to follow the rest of the examples in this chapter.
Preparing the Application
The Contents of the deploy-package.json File in the reactapp Folder
The devDependencies section specifies the packages required to run the application in the container. All of the packages for which there are import statements in the application’s code files will have been incorporated into the bundle created by webpack and are listed. The other fields describe the application, and their main use is to prevent warnings when the container is created.
Creating the Docker Container
The Contents of the Dockerfile File in the reactapp Folder
The contents of the Dockerfile use a base image that has been configured with Node.js and that copies the files required to run the application into the container, along with the file that lists the packages required for deployment.
The Contents of the .dockerignore File in the reactapp Folder
Building the Docker Image
An image is a template for containers. As Docker processes the instructions in the Docker file, the NPM packages will be downloaded and installed, and the configuration and code files will be copied into the image.
Running the Application
Starting the Docker Container
Listing the Containers
Stopping the Container
The React application is ready to deploy to any platform that supports Docker.
Summary
In this chapter, I completed the React application by adding support for URL routing and by defining the remaining components. As with the other examples in this part of the book, I prepared the application for deployment and created a Docker image that can be readily deployed. In the next chapter, I create the same web application using Vue.js and TypeScript.