creating an electron+react dev environment with webpack

All right, so in this video, we're going to build a starter app that can use Electron and React, along with TypeScript and Tailwind. We're going to combine all of these different libraries and frameworks and create a development environment that uses all of these together to build a desktop application with Electron. The reason I'm building this is because I'm actually building a personal project, which is what you see right here. This is going to be a clone of Discord, and I'm building the backend in Go. And for the frontend, I just wanted to use Electron because I just wanted an easy, simple way to build a desktop application. Now, when I looked through the Electron docs, I saw that they didn't really have any documentation for integrating with frameworks like React or something. And I really need React because I don't want to repeat the same HTML again and again. I want some sort of a component structure. So I had to use some sort of a framework. Now, there are other starter templates out there, but none of them fulfilled my needs. There were a couple ones, they weren't based on TypeScript, and I really need TypeScript because I just hate working without type definitions. There were a couple other ones that did not use Tailwind. There was one in particular that used Tailwind, but it used Tailwind 3. And I'm supposed to use Tailwind 4 because that's the latest version. So there were a couple of problems with all of the other templates and starter templates out there. So I decided to just build my own. And this video is going to be me showing you my process, how I actually built all of this. Because I think it's important to know what happens under the hood when you mess around with all of these things. So I'm going to show the entire application here, first of all, and just how it works and everything. And once we're done with that, then I'm going to create this entire application, this entire starter template from scratch, right alongside you right here. Now, there's like 50 different steps to create this entire template. So I will be using this whole project as like a reference and just kind of like referencing it again and again throughout the video as I build the new template. So, yeah. But before we even build the entire application template again, first I just want to show you how this even works. So I have a couple of scripts here, npm scripts. And we going to just go through a bunch of them We going to go through dev build and package And these are the main scripts that you going to use when you developing an application So without further ado in this long intro I'm just going to run npm run dev and what this is going to do is it's going to create a development server and run the application in development mode. So you can let me just show you. so it's going to open a react app in the browser and it's going to then render that react app inside the electron application so what's going on here is we're rendering all of the ui in this react app and then we're just um hosting that react app or you can say rendering that react inside the electron application we're literally doing just this if i show you main.ts all we're doing is loading the URL localhost 3000 where our react app is posted. And we're loading this inside our application. So that's what's going on. Now if I just go over to heading here, and I just change the text just to like show you that this does reload instantly in a development environment. So if I change this from small to large, let's say, you'll see that the react app updates, and also the application updates. So the development server works fine. You can also if I just stop this now, and if I run npm run package, what this is going to do is it's going to package your entire application and build an exe file out of it that you can install and then run on your system just like any other application. So, and this is going to take a long time to run, so I will probably just cut this part of the video, speed it up, and yeah. What it's going to do is it's going to compile both the main and the render. I'll explain both of what both of these are once we actually build this template out but it's going to compile both of these and then it's going to run electron builder which is a separate dependency i'll explain that as well later and it's going to use that to build an application by the way completely off topic but i bought a new camera so the camera should be a lot better now before this i was using my phone and that just just you know not not really good so i bought a dedicated camera now and i like it but hopefully my youtube videos get better as well with this anyway so while this is building let me just show you in the main application here you can see that when we in development mode we just run localhost 3000 on our application just to render the React app right But when we're in production mode, the React app will build all of its UI inside this index.html file in the dist folder right here. I'm going to close that. There we go. In the dist folder right here. And so to render the application in production, we just want to load that index.html file. We don't have a local host server for React running in production. So that's what we're doing over here. If we're in development mode, we load localhost 2000. Otherwise, we load the final build file that React creates for us. And by the way, this is great that, like it's a great idea to build these things from scratch and just figure out how they work under the hood just so you can like understand what's going on because like in most okay it's done let me just show you so it's going to package your app and put it in this build folder right here and if i just run this this is the setup file it's going to just what the hell is that it's going to install the application and then we can run it. So yeah, like I was saying, it's great to understand how these things work under the hood. And there we go. This is the application that we built. Obviously, you can create any sort of UI, any sort of functionality here. This is obviously just a starter template. So now you can see that this application does work perfectly fine. Now we can actually go and build this whole thing from scratch. So what I'm going to do is I'm going to go over here and just create a new folder here. And we'll just call it Electron React Starter App. And then back into VS Code. I'm just going to open my code editor in that directory. And then we can start. and actually i am going to create a new window here and just keep the previous project open as well because it did say that i'm going to use that as a reference but like i said there's like 50 different steps and there's no way in hell that i can keep them all in my mind so we're going to use this as a reference now the first things we need to do is to install a bunch of dependencies We need let me just recap we need React we need Electron we need TypeScript and we need Tailwind A bunch of these are dev dependencies and some of them are just regular dependencies. So make sure that you're installing the right ones let me just put this side by side so we can actually work with this uh right here okay so in this template the first thing we need to do is actually create uh npm package right so head into your terminal and as soon as this loads there we go just npm init y. The y flag just creates a package and doesn't ask me for any input on different fields. So it's just faster that way. Now there we go. So we have a package.json here. Now we need to install a bunch of dependencies. So let's go. We need to install a bunch of dev dependencies first. Let's go with typescript. We're going to need that. We're also going to need electron we're going to need electron builder and this is a separate from electron and what electron builder does is it literally just packages your application and builds exe files and different files that you can like send to your users and they can run and install your application we're also going to need electron reloader and this is what we use for hot reloading so basically this package is going to reload your electron application once you make some changes. So this is what we're going to use in development. We also need to install Webpack. And this is just for compiling everything. We need to install Webpack CLI. We're going to use this as well. And we need Webpack dev server. This is what's going to be used to reload our files in development. And this is separate from the electron reloader. So these things are separate. Just keep that in mind. And once we've done all of that, you can see there's a couple more dependencies, but I'm not going to install them right now. We're going to do this step by step. So these are the dependencies that we need right now to get started. We also need to install a couple of types. So install types for electron, for react, for node, and finally for react-don. Once you've done all of this, hit enter. And it was start installing. And this is going to take quite some time to fully install. So yeah, we'll just speed up to that part of the video. All right, so this just finished. We've installed most of our dev dependencies that we need to get started. Next thing we need to do is to install a bunch of regular dependencies. And this is going to be, we need React. We need React DOM. and we also need to get tailwind css and this next one is optional we also want to get tailwind css slash cli this is not really essential because we're not going to use tailwind cli but i just like to have it around just for like debugging purposes if i need to um test something or do something with tailwind directly i like to have it just for that purpose but it's not essential but i am going to install it so up to you whether you want to install this or not um we're also going to need a couple of other things we need to get tailwind css slash post css and this is a post css plugin that we're going to use in webpack to actually compile our tailwind css every time we make a change to our styling we also want to get css loaded again this is a webpack plugin webpack plugin and this is going to actually compile and create a css file in our distribution folder we also want to have mini css extract plugin and this is another web web why do i mess this up webpack plugin that we're going to use for our css and finally auto prefixer and this is another webpack plugin that we're going to use for our css so all of these play some different part in compiling and serving our css files we need all of them so install all of this and wait another 30 minutes to install all right so looks like that's done as well now we have most of the dependencies that we need to get started and you can see they all got added over here to package.json now we need to actually create our files and folders so first of all create an src folder And this is where all of our code is going to be stored. Then create a dist folder. And this is where Webpack is going to compile and put all of our compiled JavaScript, CSS, HTML files. We need both of these. So once we have both of these next create a Webpack folder And this is where we going to put our webpack configs so we need two of them we need one for the uh main process and we need one for the renderer so create webpack.main.js and webpack.renderer.js and before we actually set this up we also want to create some code files in here so we need to have main.ts this is going to be the main process and before we go any further the how electron works is it basically has a main process that handles all of the like the back-end stuff and functionality of the app and then it also has a renderer process that handles actually displaying all of the ui and all the elements right so we need to compile both of them separately and that's what we're doing here that's why we have two kind of webpack configs one for main and one for renderer that's why we have a main.ts file here and that's why we're also going to create a renderer file here so i am going to go back to this previous project and just look at how we did it over here because again there is like so many different steps here that i just don't want to mess this up so i'm just going to copy the code from over here and explain everything that i do so first we want to have electron reloader right on the right at the top of our file and what this is going to do is it's just going to again just reload everything um and recompile the application every time we make a change so we do want to have this at the top of the file as such then we need to import our electron stuff we need the app and we need the browser window if i can type there we go and then we need the path module as well from path there we go then we need the environment and this is just to separate between the development and the production environment so we want to do something we want to um run localhost 3000 on development and run the index.html file in production just like i showed you here before so that's why we want to access the environment variable and we going to pass this in our scripts later on but for now let just access it and you can access any environment variable in node by just doing process dot ENV dot the name of the variable we don't need that console log next we need to create the window so there we go we'll create a window variable here and just create a new browser window object I'll give it the same width as I had in my previous project which is 800 by 600 and then in web preferences we're going to just put node integration false and concepts isolation false all right true if you're wondering what both of these mean check the dots because I have no idea but yeah that's what we need so that's our window next we need to actually um set up the environment here and again if we're running in development we want to load a url which will be localhost 3000 this is where the react app is going to be stored localhost port 3000 there we go else if this is a production environment then we want to reload or load path.join their name. And this is just going to give us the absolute path of this directory. And then, and this is going to be in the distribution folder, by the way, in the main folder inside distribution. I'll explain that later as well. So the actual path here is going to be dash dash slash renderer and index dot HTML, just like you see over here in this different project. okay so that's our loading done finally and this is not essential but since we're just testing right now you can actually just open dev tools as soon as you open the application so you can if you remember from the project i showed you earlier when we actually run the application it just immediately opened dev tools right this line is what's doing that you don't need it but I just like to have it around. You can of course remove it if you want to. So now we actually render this app dot when ready, when the application actually launches and it's going to return a promise So we going to use then and pass in a handler which will be create window app dot on window all closed So basically when all the windows are closed then create a handler for this and all this is going to do is quit the application. And how I did this in my previous project is like such. If the process platform does not equal Darwin. I'm not sure which platform actually is Darwin. Let me just see the options. Yeah, so you have a bunch of different options. Windows, Linux, Android, different others. Not sure which one Darwin is, but what we're going to do is just use app.quit, and there we go. So that's all we need for our main.ts file. Next we need to create a renderer.ts file, and this is what's going to actually do all of the rendering and displaying all the elements. So this is where the React code comes in. And let me just show you how I did this before. There we go. So all we're doing is creating a root element over here from the index.html. We'll create that as well. So let's just run create root from react.com slash client. There we go. And then we just create a root element here. Which will be document.getElementById root. And this is going to give me a type error. So just call this an HTML element. And then root.render. And this is going to actually render a component. So we need to create the app component like you see over here. So go over to your explorer and create app.tsx. and this can just be any basic React component like this. What I did in here is I just created an example component here just to show you that we can just continue on adding more and more components or subcomponents. So you can do that as well later on. But all we really need is a simple component that just displays something, right? So now that we have this, we can actually render this over here. as such there we go and it's going to give me an error why is it going to give me an error no actually wait we we forgot to create the typescript configuration so let's do that first as well so typescript is going to give me an error here because i just haven't specified that we're using react and jsx so let me just show you this is what we need in our typescript configuration so create this file csconfig.json in the root of your project and then just copy what i have over here so we need compiler options and this is going to be target es next I guess this is the next.js ECMAScript. Module will be common.js. Library will be DOM. We're going to need that. And ESNext. JSX will be React.jsx. And this is what actually allows us to use JSX in our code. Otherwise, you get that error as you see. The outer is going to be dist. This is where we actually store all of our files. the compiled JavaScript files. The root there will be src. This is where all of our TypeScript code is going to be hosted. Module resolution is node. We need this so we can import our modules correctly. esmoduleinterop. We need this as well to be set to true. Strict true just to have better type checking. Better type checking is always a good thing. Skip lib check. Definitely necessary. finally include SRC, which is where all of our code is hosted. And then we go back. And you might need to restart the TypeScript server to get rid of this error. It will read the tsconfig.json file and there we go. Now our error is gone. Wait, never mind. It was a TypeScript configuration issue, but it was also just the fact that I could have named this TSX instead of TS. So you probably already know this, but if you're creating some sort of JSX file, you need to have either a JSX extension or a TSX extension. I just forgot to do that. There we go. So this is done. Now this is rendering our application. And before we move any further, we also want to create styles here. Now I'm going to store this in a styles directory, and I'm going to create a global.css file here. And we're going to import that in render. We need to import this because otherwise it not going to get compiled and packaged up into our application Right So the path is style slash global global there we go now it actually going to be loaded and this doesn really do anything if i show you in the original project all it does is it imports tailwind so we can do that here as well import tailwind css and this is just going to create the tailwind um styling that we need. We don't really need any more CSS files because we're just going to render all of this inside Tailwind, right? So yeah. Now let's also create the index.html file. So this is going to be in a public folder. It can be in any folder, obviously, but I just wanted to copy the React way of doing things. And in React, or at least in Create React app, you have a public folder, which is where you store all of your assets and your index.html so that's what we're going to do here as well we're going to create a public folder and create an index.html file inside it i messed it up there we go uh html there we go and it's just going to be a completely basic html file the title can be anything you want doesn't really matter this title is important though because this is the um this is going to be the title of the application once you actually run this in electron so obviously for a starter application you can call it whatever you want but just keep that in mind you're going to need to change this once you actually create the application and we just need a div with the idea of root this is where the render over here is going to actually render all of the application. So we just need a div with the id of root here. And that's all we can actually create something, we can actually add a notescript tag as well, just to like, just for completion sake, you can add something like you need JavaScript to run this application. And what this will do is if they have, if the user has JavaScript disabled, for some reason, then this will actually give them this little error message that hey you need to enable javascript to run this application i don't know if it's actually possible to disable a disabled javascript in an electron application but it's still good to have this message just in case so we have our html we have our css and we have our TypeScript stuff as well So now we can actually get started on building the webpack configurations So, like I said, we need to have a main configuration, and we need to have a render configuration. So, we'll start with main, because that's just easier to work with. I go over here, and again, you can just copy everything I have over here. there we go so we're going to need pad this module is going to be very useful because we need to use it to create different kinds of pads um and then we just create module.exports and then just the mode will be development for now target will be electron main and this is for target there are different like options that you can pick i can just show you in the if i have this open uh in the webpack docs webpack docs target so there are different options that you can pick for this target value and these are the different options you can read through them and see what each of these mean but for our purposes all we really need is this one electron main so that's what we're using here Once we have the target, next we need the entry file. And this is going to be our main entry file, which is going to be in src slash main dot TypeScript. Okay. Then we need the output. And this is going to be an object. The file name will be bundle dot js. Again, this can be anything you want. The path will be in path dot resolve. We're going to use the path module. Their name. and then outside of this directory because we're inside of a webpack folder. Then into the dist folder and main. There we go. So all of this is going to be outputted and compiled in the dist folder. We need a resolve. And we're going to resolve these extensions. We need to resolve TypeScript. TypeScript JSX. and we don't really need js here but yeah we can just remove that honestly because we're only using typescript right but if for some reason you do use jsx or js in your src folder you need to add those extensions here as well Let close this module This is going to be an object with a bunch of rules inside it And rules is just a list of objects. And here we're going to test for and this is going to be a regular expression. So double dot either a TS file or TSX file. And then the money sign to actually end the rejects. We're going to use TSLoader. And we actually need to install this by the way. So we'll do that next. And then we need to exclude node modules because no one wants to compile node modules. There we go. So that's all we need for the main. Now let's also install TSLoader. And let me just make sure that this is a dev dependency. I'm pretty sure it is. Yeah. So as I thought, it is a dev dependency. I sometimes get confused whether something is a regular dependency or just a dev dependency. But yeah. We need to install TSLoader. And that's a webpack plugin. And that's going to be used to actually compile our TypeScript files into JSX. There we go. So now our main webpack config is done. Now let's build the renderer. And the renderer is going to be a bit more complicated, as you can see. And we're going to need to get all those plugins. This one we don't really need. We need the HTML webpack plugin and the mini CSS extract plugin, along with CSS loader, post CSS loader, and all the other stuff I showed you before. So first of all, let's just install all of these, right? I'm not sure if I installed this before, but let's just do it all over again. We need to get the CSS loader, and these are regular dependencies. CSS loader, we need to get the mini CSS. I'm pretty sure I installed these already, actually. Let me just make sure, just in case. But we need all of these. Let's install these and yeah, I'm pretty sure I installed them before too. Let me check package.json. Yeah I think I already installed these so this is redundant. Yeah it's up to date. Awesome. So I already installed this. But we also need to get the dev dependencies, HTML webpack plugin, post CSS, and post CSS loader. yeah that's all so let's get these as well and if for some reason i miss a dependency we'll just get an error and we'll know what to do next we'll know what dependencies to install so it's not a big deal but let's install these and then we'll create the webpack renderer config which is right here actually while this installs let's get started we obviously need the path module which is in path there we go we need the html webpack plugin what this plugin does is it creates an html file the same as what we have here in index.html in the public folder but what it does is it literally just creates a script file it like injects the bundle.js that's going to be um created by webpack and it just injects it into the html file so basically webpack is going to compile all of our typescript into one single bundle.js file right it's just going to load that into the um in the in the x.html file i'll i'll just show you what it does once we actually configure this and then you'll know what i'm trying to say here so load that and then the mini css extract plugin as well there we go and then just module that exports and let's start writing this config mode for now development entry will be the SRC renderer file because this is the renderer config render dot CSX target can be web or electron renderer so again if I just show it's target you can either to keep this as electron render or just set it to web both of these are fine because electron renderer is also just um it's just showing you a chromium web browser so whether you use the web target or the electron renderer it's the same thing really so yeah i'm just going to use web over here but you can use either of them really and create the output object The file name will be renderer Pad will be pad The name and the disk folder. And then the renderer subfolder. Clean will be true. What clean does is it deletes the previous compiled files. And then replaces them with the new compiled files. So if you don't have clean, you'll just build the application. it'll put some files in there in the disk folder, you'll build the application again, and it will just duplicate the files in a sense, you don't need to have that kind of a mess. So we need to have needs to have clean crew over here. Then the resolve object. And again, this is going to just have TypeScript and TypeScript JSX, we don't need to have JS or JSX here, because we're just using type script module rules and you need a list of rules and first of all we need to actually compile the typescript files so this is going to just be dot tsx money sign and there we go then the use we're going to use tsloader that we already installed and we're going to exclude node modules there we go then another rule will so we're going to use this rule to load our CSS now this will just be the CSS file extensions it's going to include everything in pad dot resolved their name and SRC styles and this is why I wanted to have all the styles inside of one like folder it's going to use a couple of things. First the mini CSS extract plugin.loader then the CSS loader which is going to create the actual CSS files and then an object that just loads the post CSS loader. There we go. So there we go right. Then we actually need to initialize both of these plugins like this We create a new HTML Webpack plugin object We pass in a template key and this is going to be the pad to the index file that you have Now we have it in our public folder So the pad here is going to be public slash index There we go And then we just need to initialize this CSS extract plugin And pass in a file name. And this is going to be the file name of the compiled CSS. I just call this output.css. There we go. Awesome. And then the actual dev server. We need this to just like for the hot reloading. And this is coming from the webpack dev server module that I showed you earlier. So if I go back over here to package.json, webpack dev server. This is the dependency, the package that we're using to actually set up this dev server. So, let's tell it where our static files are going to be. And they're going to be in the pad.resolve. Their name. This slash render. There we go. Part true. Just so it reloads constantly on every change. Port will host this on 3000 or whatever you want to host it on. And that's all we need. Now, for post CSS loader here, we do need to create another config file. so let's do that as well. Let's do this outside of webpack. We'll call this postcss.config.js and we just need to initialize a couple of plugins here. So if I show you the postcss config over here, this is all we do. We just set up module.export and we have plugins key and we just initialize two plugins here. First the Tailwind CSS by PostCSS plugin. No config necessary. And then the AutoPrepixer plugin. Again, no configuration necessary. That's all we need. So now we have our Webpack renderer config and our main config. And that's all we really need now. So now we can actually start to set up the scripts. So if I go back to package.json in our actual previous application. You'll see I have a bunch of scripts here to do different sorts of things. This is what we're going to create next. So in my new project, let's head over to package.json. Remove this test script. We don't need it anymore. First, we have a TSC script, and you don't really need this, but what this is going to do is just use TypeScript to compile your application. Now we don really need this I literally do not even use this in the application So honestly if you just don even want it just remove it It doesn really matter because we don really use this What we do use is a start electron script and this just runs electron dot. Dot is the path where your application is hosted. So that's what we're actually going to use. Then we also need to create the dev scripts and the main scripts and the build scripts everything. So before we actually do that, if I just close all this off, you can see that the dev command is actually quite long. And we also have a couple of other things to other packages to install in. First, we need to create a dev main. This is going to start a development server for the main process, the main electron process. So So how to do this, we just run webpack and we pass in the webpack main config that we created, which is in the webpack folder, webpack.main.js. And we pass in the watch flag. And what this is going to do is just watch for file changes and then recompile the app if we change something in our application. That's dev main. Then we need dev renderer. There we go. And this is going to compile the renderer webpack config for development mode. so again we just use webpack config or webpack serve config webpack and then just the renderer config and we need to pass the open flag here just to like open up the server for other people to like access and once we have that then we can actually build the dev command what this is going thing to do is just run dev main and dev render. But before we do this, we need to install a couple of packages. We need to install, we need to install concurrently and we need to install wait on. And let me check again if these are dev dependencies or, yeah, they are dev dependencies. So we need to get, we need to get concurrently. What this package does is it allows you to run a couple of programs concurrently. So at the same time, basically, we need to install wait on, which is very helpful to have alongside concurrently. Because what wait on does is it like lets you wait for certain files, hosts or other like resources to like become available. So we're going to use this to to wait until our react server is fully available on localhost 3000 and then we're going to run the electron application so we need this and we need crossenv this is a package that we use to pass in environment variables to different commands in like a cross platform way so there are different ways to pass in environment variables to commands in windows in linux in mac so we use this crossing and repackage to just have a cross platform like just one way of doing those things and then this package can translate that to whatever platform we're currently on so we need these three things and these are dev dependencies so make sure to pass in dash d over here then just run this and wait for it to install all right so that's done now we can actually get started on this dev command it's going to be this is a pretty long command so let's just start writing and i'll explain what everything is happening over here so first of all we set the environment variables to development then we run concurrently and this again this is just a package to run different um file different scripts or programs concurrently at the same time we pass a couple of flags here first names and this is going to be need to escape these double quotes here and we'll have three things here we have the react application the main application and then the electron process there we go and then we have the prefix flag if i show you over here prefix colors there we go and this is just to have different like colors for every single process just so it's easier to distinguish between them i'll show you what this looks like in the actual output but uh yeah escape the quotes and just assign some colors to these i just use blue red and magenta you can obviously put whatever color you want over here and then we can actually create a bunch of pass in a bunch of scripts to run. So again, escape the quotes and run npm run dev renderer. This will be the react application that we first run. And then again, escape the quotes go over here Then we run dev main right here and npm run dev main And finally once both of these are done now we actually use that wait on package we wait for the localhost 3000 where the react app is stored or hosted to actually become available and once this is done then we use the cross env package right here we use this to pass in the environment variable development and then we run npm run start electron that's all now we let me just get out of here and we pass in a couple more flags the first kill others this means that concurrently will stop the entire application if one of the processes fails and we actually need this because if for instance the react server stops because of an error or something we don't need to have the electron application running right and the same thing in reverse if we have the application shuts down for some reason we don't need the react server running so we pass in the kill others flag and also the kill others on failed flag and it's giving me an error because i installed a bunch of dependencies without refreshing the app so let me just copy this whole thing close this and then refresh And then let's just, wait a second, did I just delete everything? There we go. Let me just copy this whole thing. And then just add it all over again. There we go. So we have all of our dependencies. We have our scripts here. By the way, we need to change this main entry point here to, what was it? This main bundle of JS. So when we compile the electron application, it's going to run the application from this point. So this is going to be hosted in this main bundle.js. There we go. Awesome. Now we have the development side of things all set up. So we can actually try and run this and just see if we did everything correctly or not. If I just run npm run dev. And you can see this is why we passed in those. Okay, so it failed, but let me just, this is why we actually passed in those prefix colors and names black. So we can just have different like colored logs here just to make things easier. Now we do have a problem here We have an error all right all right had a bit of a break there let me just run npm run dev again and we'll see if this works if we've done everything correctly up to this point and you can see we get different logs different colored logs for every single process and we have error here. There's a typo. Let me go to the main right here and change this to actually call this entry. That was just a typo. We fixed that and we run this again. And this time it should work. I hope and there we go. Awesome. so it's compiling all of the react app stuff right now module not found electron reloader so we do need to fix that as well but it just ran the react app on localhost 3000 and okay so we're missing a bunch of modules over here we need to reinstall them quickly so and obviously the react app will just the application and electron will just load the react app which is full of errors right now so that's what we see okay so that didn't work either i don't think it's a missing dependency issue actually i think it's just that uh we're not compiling it properly so let me just check out what we're doing over here and just make sure that this is the same as what we have over here i think we actually do need to add js over here yeah we do need to actually install resolve jsx and js in these files why because the node modules are in js so we do need to actually do this I think it's going to work this time but let's see and yes it does so okay so that was the problem so and yeah here the application so I messed up I said before earlier in the video that we didn need to have JS over here but apparently we do And we need to have this because all of the node modules that we use they going to be in JavaScript. So in order to bundle up the different packages that we use, and we need to bundle them up into our application as well. So we do need to actually resolve JS extension as well. So make sure you add this in your main renderer file and in the renderer file as well the main webpack file and the renderer webpack file so just make sure you do that as well i said earlier in the video that you don't need to do this but you actually do need to do this and you just learned why so yeah with that being said sorry about that but with that being said the development server works and I'll just cancel this now. Okay, so we'll go back to package.json. Development servers work. Now we need to actually create the build functionality over here. And the way we do that is with this build command and this will just run build main and build renderer. Again, since both of these are different processes, we need to build both of them separately. so let's create the individual build commands and then we'll create the actual build command after that so first we build the main process which will just be webpack with config of webpack slash webpack.main.js then we need build renderer which will be webpack with the config of webpack slash webpack.renderer.js. So we literally just pass in the appropriate webpack configs and then just let webpack handle the rest. Now our build command is going to set the env variable to production instead of development. And then it's just going to run both of these build commands. So first we build the main process and then we build the renderer process and let's try running and can run build now and what this is going to do is it's going to create a disk folder and fill it with all the stuff that we have over here so let's finish this let's wait for this to load and you can see we got sort of an error over here but it's not really important because this is just a warning we don't really to worry about this at all. And there we go. It's compiled successfully. So in the renderer folder, in the dist folder over here, this is where all of the React stuff is going to be stored. And in the main folder in dist over here, this is going to be where the main Electron stuff is going to be stored. So yeah. And this is what we're going to use to package up our application. now finally we want to create the package command because we've already seen that the development server works the build command works finally we just need a way to package this application into like create exe files that we can like distribute to users right so to do that again we set the environment variable to production and then we run npm run build which is this build command up here and this will just build the main and the renderer processes once we've built all of the files and compiled all of them then we run electron builder the package that we installed earlier to build and package this entire application now before running this just a quick couple of caveats when i was first building this template i needed to do a couple extra things to make sure that electron builder worked now you are going to need to do these as well first of all if you're building on windows if you're building an exe file and stuff you're going to need to install visual studio i'll just show it to you right now you need to head over to visual studio right here and you need to download this just click download over here make sure you download visual studio not visual studio code all right you download visual studio and you then um Okay, there it is. And then once this runs, you need to install a couple of important components for this. Run this installer with a couple of commands, which I have open somewhere over here. I forgot where. There it is. Okay. So as you know, you probably already know this. Electron, the way it displays the application is it creates or it renders the application inside of a Chromium web browser right so in order to do that it needs to have a couple of dependencies on Windows and those dependencies are right here so you need to install a bunch of components in Visual studio and you can do all of that with these commands i going to run this right in front of you so you can just see how it works let me just open up my downloads folder because that's where all this is going to be hosted let's go to downloads and then the visual studio setup file there we go then we just need to pass in all of these commands to it all right so it's going to take me a while to add all of these but uh actually maybe i can just get chat jibbiti to uh add this for me because if i just if i just copy paste this it's not going to work because of the line escapes over here and i don't want to bother with actually typing it all on my own so just convert this command into a single line there we go all right so we just copy all of this basically just um run the setup file with all of these flags that's all we need to do so this is the visual studio setup then i add all of these then I run this, it's going to first download the installer. And then it's going to already select all the components that we need. So you can see it's already downloaded and installed, then it's going to launch this. And then now I've already installed it. But for you, if you don't have Visual Studio installed with all these components, then it's going to pre select all of the components for you the same components that we added over here. And then you can just run install and let it do its thing all right so you do need this to like you do need this to compile and package your application so just make sure you have this otherwise you will get an error and it will tell you that you need to install visual studio build tools to package your application and all that so yeah make sure you have all these dependencies installed i'll link this in the um description or something somewhere and you can just check that out as well so yeah there we go and one more thing the first time you run electron builder make sure that you run it as administrator and you can do that by either opening a terminal window in administrator or just opening vs code in administrator and you need to do this because it going to create a bunch of semantic links and other stuff that for some reason only admins can do And it's only going to do that the first time you run this. So the first time you run Electron Builder, just make sure you run it with admin privileges. After that, you don't need to do it anymore. So with all those caveats discussed, I know this is a huge barrage of information and it's probably going across your head, but yeah we do need to pay attention to all these things so with all of that stuff being said let's just run npm run package and see what we get so actually no let me just cancel that let me just cancel it i totally forgot we do need to add some configuration here for the build for the actual build so this is going to be a build key and it's going to be an object let me just add a comma here to fix the error and it's going to have a bunch of stuff here where's the there it is so it's going to have all of these things and this is basically just some configuration properties for electron builder to know what to do to package your app right you can read the electron builder documentation and just figure out all the extra stuff that you can add over here but just to get you started all you really need right now is the app id i just call this um my name plus the application name obviously you can call this whatever you want then the product name which is going to just be electron react starter app again this is just the application name you can call this whatever you want directories the output is going to be in the build directory files. So what files it wants to copy. So everything that we need to run this program is going to be in the dist folder, right? So okay, this is supposed to be a list, not an object, make sure you fix that. Okay, so everything that we need is going to be in the dist folder. So we just use this syntax to get everything in the dist folder. And then we also specify the bundle.js file more like specifically okay then we need to create the platform specific targets for windows this is going to be nsis for mac this is going to be the dmg files which is how they run applications and for linux it going to be the app image file that how linux users run electron applications app image there we go so now with all of this done let me just format this because why not with all this done now we can actually run the package command and it should work okay let's run this npm run package and this time it should work. Again, make sure that you the first time you run this, you run this as an administrator and make sure that you have installed Visual Studio build tools if you're running this on Windows. So first it's going to build the application, obviously, just like we specified over here, set the environment variable to production, run the build command, and then run electron builder to package this application. So as you can see over here, the build command successfully ran and compiled everything. Now we start running Electron Builder and now it's going to start packaging the entire application. And you can see it loads all the configuration from the build field inside package.json, the same build field that we added over here just now. now packaging the application does take a long time like five or ten minutes so yeah i'm just going to speed up this this section of the of the video and we'll see what we get in the end because i failed for some reason let me just run it again because i did mess with my connection there so maybe that broke things let's just run it one more time just to confirm so it's going to build the application again and that's obviously going to go really well because in the build command everything already works and okay all right uh let me just see where i left off you can ignore all of this so we were building a starter template for electron and react and we finished building it but we had just one problem just one small problem with packaging the application so if I just open that project up again and i can close this one i don't really need this anymore this is a different project so let me just show you the problem again because i spent a lot of time trying to debug this let me run npm run package again and just show you the error one more time because the solution is extremely simple and honestly dumb I'll show you I'll show you what I mean in just a second first let's run this let's see the error that it gives us and then let's fix it don't mind me just checking if my recording is perfect and it seems to be okay so it's building the app and then it will package the app and crash because we haven't fixed the error yet all right so now it's building and packaging it and there we go so this is the error that we're having and it doesn't really matter because the problem is that when i first built this template i was using electron 37.2.4 not 5. and the at the time i started recording this video some minor version came out and it just broke every package for some reason which makes no sense by the way because when you update a minor version of a package from five to six to seven or something or whatever like that it's not supposed to break other packages all right minor version upgrades are not supposed to do that so i don't know why the javascript ecosystem is so broken but what we need to do to fix this is to just install electron version 32 37 so just one minor version behind this this probably just came out like a couple days ago and it just updated it and broke everything so just downgrade to 37.2.4 and then this packaging process should work now i'll run this again and it should work now and once this is done packaging i'll show you the actual app i've actually built this once before while just trying to fix this bug off camera so you can see an exe file over here this is just an old one we're going to build and package this one more time right here and then we're going to run the final app and there we go it's done so i'll clear all of this and then i'll go into this build folder where we have packaged our application and we will run this setup file and what this will do is it will just install the application and then run it so give it a minute and there we go now it's installing our application and then it will run and we will see whatever we were rendering there and there we go that's our application that's the final application the exe file that you can distribute to any of your users and they can just double click and run it so yeah that's the final project we covered how to set up this whole development environment with electron react typescript and tailwind which is my favorite stack and yeah we set up a development environment we figure out how to package the the whole thing and distribute it and everything else so yeah that's about it