In this part of the tutorial we will scaffold the project. This tutorial assumes that the reader has already downloaded and installed node

1: Create a directory for the app using the mkdir command. I called my directory react-express-todo

2: move into the newly created directory using the cd command

3: Create the package.json file

4: Install web pack for bundling and minification. Notice that I used --save-dev switch to indicate I want it only for development

5. Initialize git

6. Open the directory in your code editor. Mine is VS Code

7. Create a .gitignore file and add an entry for node_modules directory

8. Install web pack cli and server

9. Install babel core to help us compile our es6 into JavaScript

10. Install @babel/node to help us compile babel in the command line

11. install @babel/preset-env to enable us to compile es6

12. Install @babel/preset-react to enable us compile react

13. Install @babel/register which is a dependency for the previous babel packages

14. Install babel loader

15. Create a babel configuration file

16. Create the web pack configuration file

17. Create the application entry point. Mine will be an index.js file located inside src\app

18. Add the start command to the package.json scripts section

19. Test your configuration by executing npm start

As you can see from the output above, we succeeded! You will notice a new dist folder, which contains your compiled code, we will now

20. Add the dist folder to the .gitignore file

21. Tell webpack to focus on processing JavaScript and react files

22. Configure webpack dev server to use react history api

23. Tell web pack to use the babel-loader to process react files

24. Add the applications landing page and wire up the bundle.js file web pack generates

25. Add a dev command which will launch the app using web packs dev server

26. Now try running the app by typing npm run dev. If you encounter the following error

Change the dev script command from webpack-dev-server to webpack serve

And try again and yay! It works!

And the --open flag opened up the app in my default browser

Now add some text to your html and refresh the page