- 17
- 94 923
Ehren Grenlund
Приєднався 17 січ 2023
Open Cinema Dev Log #1
If you want to contribute, please join my Discord! discord.gg/Vmk75Wsm
In this video we just go over the current progress of the Open Cinema video editor. There isn't much to report in this video, but I do hope you all like the new editing stuff I've been trying, definitely have been trying to get better at that.
My Website: www.ehrengrenlund.com
Contact Me: me@ehrengrenlund.com
Open Cinema: github.com/SGEhren-dev/OpenCinema
In this video we just go over the current progress of the Open Cinema video editor. There isn't much to report in this video, but I do hope you all like the new editing stuff I've been trying, definitely have been trying to get better at that.
My Website: www.ehrengrenlund.com
Contact Me: me@ehrengrenlund.com
Open Cinema: github.com/SGEhren-dev/OpenCinema
Переглядів: 167
Відео
Electron Portfolio App: Navigation
Переглядів 1,6 тис.Рік тому
In this video we set up the entire Navigation system including the SideNav. If you haven't already, join my Discord (discord.gg/JzM4RJ46) for quicker responses to questions! This series is to help you land a job as a Full Stack developer at any company in 2023. Remember to Like, Comment, and Subscribe for more content! Documentation Links: FontAwesome: fontawesome.com/docs/web/use-with/react We...
I'm making an open source video editor....
Переглядів 249Рік тому
I hope you all enjoy this announcement and some of you want to work on this project with me. I appreciate those that do, and I really hope it helps you out as well! Remember if you want to contribute, please join the discord and let me know! I will add the contributor role and you can get started! Repository: github.com/SGEhren-dev/OpenCinema Discord: discord.gg/JzM4RJ46 Website: www.ehrengrenl...
Introduction to Server Side Rendering with Next JS
Переглядів 573Рік тому
In this video we go over setting up server side rendering in Next JS. This is an introductory video to help you get started and there will be future videos about NextJS with authentication and other useful things. NextJS Docs: nextjs.org/docs/getting-started/installation Website: www.ehrengrenlund.com Contact Me: me@ehrengrenlund.com Remember to Like, Comment, and Subscribe for more content!
Electron Portfolio App: Login System
Переглядів 6 тис.Рік тому
In this video we set up the entire log in system and finish the app! There are a couple bugs I ran into that we do fix in this video, so make sure you watch towards the end to get those fixed. This series is to help you land a job as a Full Stack developer at any company in 2023. Remember to Like, Comment, and Subscribe for more content! Documentation Links: Axios: axios-http.com/docs/api_intro...
Setting up TailwindCSS in a React Vite Application
Переглядів 270Рік тому
In this video we go over setting up TailwindCSS in a React Vite application. This was requested by my viewers and here is the video. This is just going over a basic set-up and all of what is covered here can be found on the TailwindCSS documentation page. Tailwind Docs: tailwindcss.com/docs/installation Website: www.ehrengrenlund.com Contact Me: me@ehrengrenlund.com Remember to Like, Comment, a...
How to set up functional testing with Jest in Node.JS
Переглядів 530Рік тому
In this video we go over setting up your Jest environment. I give a few different examples of creating basic tests and snapshot driven tests. I hope you guys enjoy the content! Jest Documentation: jestjs.io/docs/getting-started Remember to like, comment and subscribe for more content! Website: ehrengrenlund.com Contact-Me: me@ehrengrenlund.com
Electron Portfolio App: Setting up the Network Layer
Переглядів 742Рік тому
In this video we go over setting up the network layer for your Electron portfolio app. This layer is crucial for making requests to our API from our application. Being able to connect to the API is important for data retrieval and authenticating our users. This series is to help you land a job as a Full Stack developer at any company in 2023. Remember to Like, Comment, and Subscribe for more co...
Electron Portfolio App: Setting up Redux
Переглядів 753Рік тому
In this video we go over setting up the redux layer for your Electron portfolio app. This can be very confusing since we are introducing some new topics that we didn't cover in the last Redux video. This series is to help you land a job as a Full Stack developer at any company in 2023. Remember to Like, Comment, and Subscribe for more content! Documentation Links: Redux: redux.js.org/ Redux Too...
Electron Portfolio App: Folder Structure
Переглядів 1,5 тис.Рік тому
In this video we go over setting up the project structure for your Electron portfolio app. This series is to help you land a job as a Full Stack developer at any company in 2023. Remember to Like, Comment, and Subscribe for more content! Documentation Links: Webpack: webpack.js.org/concepts/ Vite: vitejs.dev/guide/ REST-API-Framework: github.com/SGEhren-dev/REST-API-Framework Website: www.ehren...
Creating a full electron app for your Portfolio
Переглядів 3 тис.Рік тому
In this series we are going to be creating an electron application for your portfolio. We will be creating a REST API and login system for the application, and all of the data layer stuff will be explained in detail as well. This series is to help you land a job as a Full Stack developer at any company in 2023. Remember to Like, Comment, and Subscribe for more content! Documentation Links: Webp...
How to bundle an Electron Application
Переглядів 2,3 тис.Рік тому
In this video we cover bundling the Electron Vite application from the other videos! I appreciate all of the feedback on the other videos! If you have any other things you would like to see, just let me know in the comments below and I can get around to making a video explaining it further. Website: www.ehrengrenlund.com Remember to Like, Comment, and Subscribe for more content!
Getting started with Redux and Redux DevTools
Переглядів 369Рік тому
Thank you all for watching the video! I hope after watching this it made building your application with redux that much easier and hopefully redux devtools is now more clear as to how to install it. When I first started with the plugin it was rather difficult to find code that actually worked, and I hope this is the solution for you all as well! Website: www.ehrengrenlund.com Here are the links...
How to Set-Up IPC Handlers with Electron
Переглядів 2,7 тис.Рік тому
In this video we go in-depth on setting up and registering IPC handlers in Electron using the Context Bridge. This video is short and to the point and will help you get any IPC handler up and running across any Electron applications. Please watch the other video on my channel about creating a Vite Electron application before watching this one as we use that folder structure. As always, remember...
How to create a basic Electron app with Vite and React
Переглядів 74 тис.Рік тому
In this video I go over using the vite-electron boilerplate for creating a basic Electron app with Vite and React! If you want to join my discord for more personalized help, feel free to join: discord.gg/JzM4RJ46 As always, support is appreciated so I can make better content for you all! Remember to like, comment, and subscribe for more videos! Website: www.ehrengrenlund.com Check out my forums...
Create a REST API with NodeJS and Express w/ Authentication
Переглядів 519Рік тому
Create a REST API with NodeJS and Express w/ Authentication
how do you package the app
personnaly i prefer the method to generate the electron vite react repository with the official vite create command. that make all the functionnaly of vite include. like the reload each time we change the electron files,etc.. There is the command: npm create vite@latest my-electron-vite-project After select Others->create-electron-vite->React.
How can I do this but instead TS use JS
I want make executable using react builder but when i try to execute it. it is showing blank screen. Any solutions for this ?
You can use a tool called debugtron, and start the executable with that and it will give you an output of the logs and you can then figure out why it might not be working.
how to add auto updates in an electron app while using this
at last... I was looking so long for such a video! thank you very much!!
nice video, do you have one to get debugging setup correctly in vscode, I have followed a couple but they don't seem to work properly
Thank you!!!!
Love your content. Subscribed and liked. One suggestion: Your audio levels are way too low. To see the level right-click on the video and click Stats for Nerds. It shows levels of -11db or -15bd in part two. It should be about -2db.
tutorial great and all BUT FOR SOME REASON VS CODE IS LIKE NAH BRO YOU AINT GETTING ANY MAIN.TS OR ANYTHING LIKE THAT WORKING edit: fixed it
Thank you so much. I spend hours of trying to do this, after find this video, I managed to do it. Do you have a video of building and installing for production?
I'm studying programming, I started 3 months ago. I thought your project was very good. One question, if I need limited user access, can I simplify the implementation of this in this project? Is it very complicated to modify?
excelent content which would be be much more excellent if font size were bigger! thank you very much!
$ npm install npm WARN cleanup Failed to remove some directories For some reason i keep getting this error, both yarn and npm, and there isnt any package lock json to delete 😭 😭
Pls how can I setup the same application with JavaScript instead of typescript?
in the setup command and the beginning of the video. you will just use javascript instead of typescript. anywhere i use types, you will just omit those
Hi, thanks for the content. I experience issue with that tutorial, when I bundle my application for mac, I open the .dmg installer and the electron window loads, but it is completely blank ? What could be the issue ?
nice work 👍
very good 👍👍
👍👍👍👍
Nice vid. How did you set all the css files as .scss initially? i thought you need to npm i sass in the project
Yes, so you will need to do npm i -D sass to get scss files to work. Vite does all the configuration for you so there isn't anything you have to do there.
WOW. this video helps me. thanks you so much
Couldn't get React Native for Windows to work Not sure I would be aware of this tool if it wasn't because of your video.
Amazing video! I disliked UA-cam as I had been searching for such a video for the last 6 months, and UA-cam didn't pull it up. I even quit Electron and Vite, but Google opened my eyes and showed me this video. Bro, good job! Keep it up. If you had some kind of full course on Udemy, I would definitely buy it
Hi, I'm having a problem making the build. I have a Sidebar which handles paths, for example "/", "/configuration". At the time of development everything works fine but when I do the build and I want to navigate between the menus, I get that the files (the paths I set) are not available. Could you help me please? Thank you very much and nice video!
I wish i had a clear knowledge about these config options like you. You saved me man thank you sooo much. ❤❤❤
wasted my time, anything but the title ...
but i can't open in the browser
no shit It's electron, it's not a web app.
is there any way with react js app ?? it is ts btw
how is this video free.... legend
Hi ! Sorry for disturbing My app is built now It show the screen but DevTools is disconnected! It seems that my db file in the dist-electron folder are not found Help me please 🙏🏾
I have a discord and would be happy to help you there! Here is an invite link: discord.gg/yjJw8DFx
excellent video :)
Gotta be one of the worst vids out there “uhh” “uhh”. Lmao.
There is way to write code in jsx not in tsx ???
In that boilerplate when you initialize it, you can select what language you want to use. in this video i selected typescript, but you can select javascript if that’s what you want to use
worst video ever.
mooooon!!!, haoooon!!, chwaooon!!
mmm that seems like a lot of code to set the title of the window, I don't know much about Electron but I can't see how this would scale to a full app of similar events. Thanks for making the video though.
It’s just an example. Production level apps usually would have titles set when a window is spawned from electron. IPC is typically used for accessing node libraries that are not exposed to the front end. Hopefully that clarifies some things?
i think its quite the code for one implementation, even if it is to set the window title but otherwise that functionality is everywhere, look at ms word. Enterprise grade applications use it everywhere
Thanks a lot!
Awesome ! , and this my first comment to any of the youtube video I watch !!.
Thank you for these very useful and practical videos.
Great video. Love it. ❤
Finally! A guide to setting up Electron+React that actually works! Thank you.
Thanks for the Electron series!
thank you! fyi - Vite is pronounced Veet like as in French for quickly // I'm sure it doesn't matter much I just wanted to let you know 😅
🎉
Found you from your electron IPC tutorials but I love devlog content and make my own devlogs. Look forward to following your progress man! 🤝
Hey there. It seems that there are two ways to go about quickly scaffolding the project. The most conflicting part of this is how both methods exist in the GitHub org that hosted them. You: npm create electron-vite: via a separate scaffolding CLI repo on their org They: npm create @quick-start/electron: via their official CLI repo, also on their org So... Why should we pick this CLI over the official one? Does it do anything better than the official? Why would the authors fragment their userbase like this? ---- *EDIT* : You know what, I didn't read carefully. It seems the tool you used is not the official way to go about it, and the community has created a small org around electron-vite that appears to authentically represent electron-vite. Somehow. The author of electron-vite was not involved in the development of that alternate CLI. It's still feels fragmented.
npm create @quick-start/electron grants additional configurations to the initial project set up, for instance I don't use TypeScript and by default the npm create electron-vite adds TypeScript configurations.
Liked and subscribed, I'd love to see the progress!
It will definitely take a while, but I will be keeping the channel updated with weekly dev logs!
After trying to set an App Icon, my app displays just a white screen on the production build. How can we set the app icon without encountering issues? In the meantime, Thanks for this video, it helped me build an app in a very fast time.
Are there any errors that pop up in your console? You should just have to replace the favicon.ico file with your own. Regular PNG files wont work and etc. has to be a .ico file as far as I am aware.
Please zoom unto your screen or use bigger font. I can't see things without a microscope.
hello bro my app work well on comand npm run dev. But when i building the app not finding the files you know about that?
They should either go into a dist folder or a build folder in your project directory. if they are not, make sure your command is completing and there are no errors in the output
@@ehrengrenlund great i try see it thanks
Have you tried the new Protocol handle method? Since they've deprecated previous ones the one is causing a headache in retrieving local files.
I have not actually. i will have to check that out