Setup React with Typescript and Webpack: Building a microservices-based NodeJS and React app

Опубликовано: 16 Октябрь 2024
на канале: Lauro Müller

1,136

Link to coupons with BIG DISCOUNTS 🤯 :
👉 Mastering Terraform: From Beginner to Expert - https://www.lauromueller.com/courses/...
👉 Mastering GitHub Actions: From Beginner to Expert - https://www.lauromueller.com/courses/...
👉 Write better code: 20 code smells and how to get rid of them - https://www.lauromueller.com/courses/...

Do you want to bring your dev skills to the next level? Then check out the links with BIG DISCOUNTS to my courses on Udemy! Purchasing the courses is a great way to support this channel and the content I produce, while also getting something amazing in return, so head there right now! I am looking forward to seeing you there and receiving your feedback on the course!

The courses also have a 30-day money-back guarantee, so if you are not satisfied with the purchase, you can ask for a refund, no questions asked.

***

Hello everyone! In this video, we start with the setup for our web client in React with Webpack and Typescript! We will start the project, install all the dependencies, create the necessary scripts, and add a minimal working configuration to the project. Of course, we will extend this configuration over the next few videos and in the future when necessary :)

If you are not following the playlist, you can also watch this video as a standalone video to setup a React application from scratch with Webpack and Typescript.

❯❯ GitHub repo for the project: https://github.com/lauromueller/unsoc...
❯❯ Git commit for this video: https://github.com/lauromueller/unsoc...

This video is part of a series where we are developing a microservices-based social media application with the main focus on learning the microservices pattern. We are using NodeJS for our backend services, and React for our frontend client.

─ 🎬 VIDEO CHAPTERS AND CONTENT ─
0:00 Introduction
0:30 Merge latest dependency updates into master
2:22 Video agenda and overview
3:24 Create-react-app vs. Setup from scratch
7:00 Initialize the npm project
7:48 Install the dependencies
9:12 Create the necessary dev scripts
10:35 Create the configuration files
23:54 Add the App.tsx and index.tsx files
26:07 Test our dev server
27:43 Small update in the babel configuration
29:19 Closing of the video :)

❯❯ https://webpack.js.org/configuration/...

─ 🖥 CODE SNIPPETS ─
❯❯ Initialize project: npm init -y
❯❯ Install production dependencies: npm install [email protected] [email protected]
❯❯ Install dev dependencies: npm install --save-dev @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @babel/[email protected] @types/[email protected] @types/[email protected] @types/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

─ 🎥 OTHER PLAYLISTS IN THE CHANNEL ─
❯❯ Typescript by example: https://bit.ly/typescript-by-example

─ 🌎 ADDITIONAL LINKS ─
❯❯ Want to support this project? / lauromueller
❯❯ My LinkedIn profile: / lauromueller

─ 📬 SUBSCRIBE TO THE CHANNEL ─
Want to become a better, more skilled developer? Then make sure to subscribe to the channel and keep on challenging yourself with the new concepts we discuss in every video :) I have a lot of ideas for playlists, ranging from an introduction to Typescript to a deep dive on more complex technologies such as Apache Kafka!

─ 🔈 CONTRIBUTE! ─
If there is any topic in development that interests you, make sure to write it down in the comments! I will take into consideration all your suggestions and requests, as well as the popularity of each of them, when deciding which series to record in the future :)