We will again be using the Parcel bundler for this application. Now that you know a bit more about bundlers, you should be able to better appreciate how this helps us to build the application.
The output of the Parcel bundling process will be stored in the dist folder, which will thus contain the production version of the code. That way, we will not mix build-time elements and production ones.
Another change that we have made, compared to the previous applications, is that we will put our source code inside the src subfolder, instead of at the root level. This will introduce a cleaner separation of concerns as we'll avoid mixing configuration files with the application code.
The output of the TypeScript compiler will also be stored separately, under the .tmp folder. We did this in order to avoid mixing the source TypeScript files with the generated JavaScript code.
To do this, we have modified the tsconfig.json file as follows:
- Set the rootDir property to ./src: Specifies the root directory of input files
- Set the outDir property to ./.tmp: Specifies the output directory for generated code
With this in place, we have created a clean separation between project-level configuration files, application source code, generated code and production build output. We heavily recommend doing so for all of your projects.
Regarding the code itself, we still have an index.html file. This time, it loads world-explorer.ts as the main entry point. As we'll soon see, this file will contain much less code than the entry point of our previous applications, thanks to modules.
Finally, note that we have already added the io-ts library to the dependencies of the project as we'll be using it. Also, if you look under src/services, you'll see that there is already a file there called world-bank-api.ts. We've placed all the necessary validators and runtime types for the API parts that we'll use there.
Don't hesitate to take a look at those to see io-ts in action!