Bootstrap a TypeScript + React project
Learn how to setup a TypeScript + React project from scratch. Understand the reason behind every line involved in the configuration allowing you to customize it at will in the future.
Instructor: [00:01] We'll start off with the Baboon's package.json file. We'll go ahead and install all the modules we'll need in one go. These are the general React modules like React, ReactDOM, Webpack, Webpack CLI, Webpack Dev Server, along with TypeScript and TypeScript-specific things like the types for React, ReactDOM, and ts-loader for Webpack.
[00:32] Once the installation is complete, let's kick off by wrapping up all the modifications needed for package.json by simply adding two script targets. We add a build script which just invokes Webpack in production mode. We also add a start script which runs with the Webpack Dev Server for live application development using development mode and serves up the public folder.
[01:04] Next we'll go ahead and add a webpack.config.js configuration file. First, we specify the application entry point. Up next is the output location for a built bundle.
[01:20] Next, we tell Webpack to support ts and tsx file extensions along with the original js extension. Finally, we tell Webpack that for ts and tsx files, it should use ts-loader.
[01:38] We'll go ahead and create our basic HTML file in the public folder. This file simply contains a root div where we'll render our React application, and loads the bundle generated from Webpack.
[01:58] Next, we'll go ahead and add a tsconfig.json file to set up the TypeScript compiler options. We enable source maps, so we can debug the TypeScript files.
[02:10] We'll be trans-filing to CommonJS. We want our JS to be compatible with ES5. For JSX, we'll be using React. We include all the files in the source folder, and disable compile on save for the IDE, is that will be done with Webpack.
[02:30] That's it for the configuration. Now let's write some demo code. I'll create a source app.tsx file. We'll simply import React and ReactDOM. Finally, we use ReactDOM to render "Hello world" to our root div.
[02:56] Now if we open up the terminal and run our scripts target npm start, it will start up a Webpack Dev Server and serve the public folder up at localhost 8080. If you visit this URL at the browser, you can see our application running.
[03:15] If you make an edit to the file, Webpack Dev Server will compile the file on the fly and re-load the browser. When you are ready to deploy your application, you can execute npm run built. This time, a Webpack will compile our code and write the app.js file to disk.
[03:39] If we wanted, we could ship the whole public folder to some hosting service provider, as it contains the built file along with index.html.
[03:53] To recap, the set-up simply involves three simple things -- package.json for specifying our npm modules and splits tsconfig.json for configuring TypeScript, webpack.config.js to use a Webpack for compiling and running our code, and npm modules in the browser.
got resolved. this error occurred because of tsconfig.json residing in public folder.
Glad to hear that 🌹
I've just gone through the first bootstrap part and i get an error when running npm start.
"$ webpack-dev-server ./webpack.config.js --content-base ./public The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli -D"
seems they've changed a webpack dependency?
The issue i'm finding with this course is you didn't specifiy a webpack version. as you've put just 'webpack' in the command line mine has installed 4.2.0 which it appears it quite different. i'm getting warnings when trying to load and build
Same here, this setup needs to be updated as the latest webpack has changed quite a bit. Or at least mention the versions installed originally. The build does not happen without installing the older versions.
I've updated the lesson / course for the latest webpack changes. The steps should work once more 🌹
Hi Basarat ... I get this error message: Cannot use JSX unless the '--jsx' flag is provided.
Hi Basarat ... I get this error message: Cannot use JSX unless the '--jsx' flag is provided.
Make sure your tsconfig.json matches what is shown in the lesson. We set jsx to react in the video (around 2:07)
Hi Basarat, great lesson. Just wanted to mention that the snippets on the Transcript should be revised.
- The package.json file is currently set to:
"scripts": { "build": "webpack ./webpack.config.js", "start": "webpack-dev-server ./webpack.config.js --content-base ./public" }
And it should be (like in the video):
"scripts": { "build": "webpack -p", "start": "webpack-dev-server -d --content-base ./public" }
- There's a typo in the webpack.config.js file, it says 'patch' instead of 'path:'
output: { patch __dirname + '/public', filename: 'build/app.js' },
Hi Basarat ... I get this error message: Cannot use JSX unless the '--jsx' flag is provided.
Make sure your tsconfig.json matches what is shown in the lesson. We set jsx to react in the video (around 2:07)
I get the same issue but have the sconfig.json file the exact same. The full error for me is:
ERROR in ./src/app.tsx 5:16 Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type. | var React = require("react"); | var ReactDOM = require("react-dom");
ReactDOM.render(<div>Hello world</div>, document.getElementById('root')); | @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.tsx main[1]
ERROR in /Users/@/Documents/projects/@/src/app.tsx ./src/app.tsx [tsl] ERROR in /Users/@/Documents/projects/@/src/app.tsx(5,3) TS17004: Cannot use JSX unless the '--jsx' flag is provided.
Hi Basarat, great lesson, but does not work with latest version of webpack and typescript. I finally found how to make it work : https://github.com/hdorgeval/react-ts-starter (version v0.1.0) It would be awesome if you could update your course :)
Hi everyone, Restart your IDE. Sometimes tsconfig.json changes aren't immediately picked up
And add at your tsconfig.json in compilerOptions: { "compilerOptions": { .........., "jsx": "react" }, ....... }
Isn't this negated now that create-react-app --typescript exists?
Hi Basarat, great lesson, but does not work with latest version of webpack and typescript. I finally found how to make it work : https://github.com/hdorgeval/react-ts-starter (version v0.1.0) It would be awesome if you could update your course :)
This!
The current state of the course does not work for me See below the result of performing the "npm start" action. I'm investigating on my own but if you can give some guidance on why " Cannot find module 'webpack-cli/bin/config-yargs'", that would be great.
PS C:\Users\Teddy\Documents\ReactJS Tutorial\Typescript with React> npm run start
typescriptreacttutorial@1.0.0 start C:\Users\Teddy\Documents\ReactJS Tutorial\Typescript with React webpack-dev-server webpack.config.js --content-base public
internal/modules/cjs/loader.js:583 throw err; ^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\Teddy\Documents\ReactJS Tutorial\Typescript with React\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! typescriptreacttutorial@1.0.0 start: webpack-dev-server webpack.config.js --content-base public
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the typescriptreacttutorial@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Teddy\AppData\Roaming\npm-cache_logs\2020-10-25T23_30_26_312Z-debug.log
Error: Cannot find module 'webpack-cli/bin/config-yargs'
I was able to fix this error by changing the webpack-cli version in package.json to 3.3.12. See this GitHub issue for more information.
"devDependencies": {
"parcel-bundler": "^1.12.3",
"webpack-cli": "3.3.12"
},
Followed the whole lesson, created directories in the same structure and created files the same way. But it is not working. Error:
ERROR in [tsl] ERRORTS18002: The 'files' list in config file 'tsconfig.json' is empty.got resolved. this error occurred because of tsconfig.json residing in public folder.