Ehren Grenlund
Ehren Grenlund
  • 17
  • 94 923
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
Переглядів: 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 to create a Discord.JS bot
Переглядів 105Рік тому
How to create a Discord.JS bot

КОМЕНТАРІ

  • @fonte1184
    @fonte1184 26 днів тому

    how do you package the app

  • @zamer_1234
    @zamer_1234 Місяць тому

    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.

  • @MarathiMulgaInUK
    @MarathiMulgaInUK 2 місяці тому

    I want make executable using react builder but when i try to execute it. it is showing blank screen. Any solutions for this ?

    • @ehrengrenlund
      @ehrengrenlund 2 місяці тому

      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.

  • @HrithikDas-v4i
    @HrithikDas-v4i 3 місяці тому

    how to add auto updates in an electron app while using this

  • @allhailalona
    @allhailalona 3 місяці тому

    at last... I was looking so long for such a video! thank you very much!!

  • @ChrisOndrovic
    @ChrisOndrovic 4 місяці тому

    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

  • @marekchoinski5431
    @marekchoinski5431 5 місяців тому

    Thank you!!!!

  • @TechWithIndy
    @TechWithIndy 5 місяців тому

    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.

  • @momocraft365
    @momocraft365 5 місяців тому

    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

  • @PacLevkov
    @PacLevkov 5 місяців тому

    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?

  • @luizsozinhoas
    @luizsozinhoas 6 місяців тому

    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?

  • @alvarobyrne
    @alvarobyrne 6 місяців тому

    excelent content which would be be much more excellent if font size were bigger! thank you very much!

  • @rfryanfavour4369
    @rfryanfavour4369 6 місяців тому

    $ 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 😭 😭

  • @Silasmatala
    @Silasmatala 7 місяців тому

    Pls how can I setup the same application with JavaScript instead of typescript?

    • @ehrengrenlund
      @ehrengrenlund 7 місяців тому

      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

  • @georgirazsolkov5870
    @georgirazsolkov5870 8 місяців тому

    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 ?

  • @sadrakhorami4902
    @sadrakhorami4902 8 місяців тому

    nice work 👍

  • @sadrakhorami4902
    @sadrakhorami4902 8 місяців тому

    very good 👍👍

  • @sadrakhorami4902
    @sadrakhorami4902 8 місяців тому

    👍👍👍👍

  • @2ghost-f4x
    @2ghost-f4x 9 місяців тому

    Nice vid. How did you set all the css files as .scss initially? i thought you need to npm i sass in the project

    • @ehrengrenlund
      @ehrengrenlund 8 місяців тому

      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.

  • @aslamjonibragimov4149
    @aslamjonibragimov4149 9 місяців тому

    WOW. this video helps me. thanks you so much

  • @jcruz6888
    @jcruz6888 9 місяців тому

    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.

  • @DisconnectedMedia
    @DisconnectedMedia 9 місяців тому

    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

  • @fraanarrizurieta5198
    @fraanarrizurieta5198 9 місяців тому

    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!

  • @nethajimurthy1229
    @nethajimurthy1229 9 місяців тому

    I wish i had a clear knowledge about these config options like you. You saved me man thank you sooo much. ❤❤❤

  • @smohammadhn
    @smohammadhn 9 місяців тому

    wasted my time, anything but the title ...

  • @muhammedshahanashussain2181
    @muhammedshahanashussain2181 10 місяців тому

    but i can't open in the browser

    • @jcruz6888
      @jcruz6888 9 місяців тому

      no shit It's electron, it's not a web app.

  • @shreyassonu3305
    @shreyassonu3305 10 місяців тому

    is there any way with react js app ?? it is ts btw

  • @thehero9
    @thehero9 11 місяців тому

    how is this video free.... legend

  • @tidalauralien7984
    @tidalauralien7984 11 місяців тому

    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 🙏🏾

    • @ehrengrenlund
      @ehrengrenlund 11 місяців тому

      I have a discord and would be happy to help you there! Here is an invite link: discord.gg/yjJw8DFx

  • @infowizard_
    @infowizard_ 11 місяців тому

    excellent video :)

  • @sgares6741
    @sgares6741 11 місяців тому

    Gotta be one of the worst vids out there “uhh” “uhh”. Lmao.

  • @tidalauralien7984
    @tidalauralien7984 11 місяців тому

    There is way to write code in jsx not in tsx ???

    • @ehrengrenlund
      @ehrengrenlund 11 місяців тому

      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

  • @eucheckout7
    @eucheckout7 Рік тому

    worst video ever.

  • @divyanshm.2276
    @divyanshm.2276 Рік тому

    mooooon!!!, haoooon!!, chwaooon!!

  • @jacobgoldenart
    @jacobgoldenart Рік тому

    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.

    • @ehrengrenlund
      @ehrengrenlund Рік тому

      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?

    • @stephentelian2919
      @stephentelian2919 Місяць тому

      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

  • @brr3534
    @brr3534 Рік тому

    Thanks a lot!

  • @AbhishekGupta-je5ni
    @AbhishekGupta-je5ni Рік тому

    Awesome ! , and this my first comment to any of the youtube video I watch !!.

  • @kinamartinez
    @kinamartinez Рік тому

    Thank you for these very useful and practical videos.

  • @vedx
    @vedx Рік тому

    Great video. Love it. ❤

  • @Rick-mf3gh
    @Rick-mf3gh Рік тому

    Finally! A guide to setting up Electron+React that actually works! Thank you.

  • @EnriqueOlmedo-e4m
    @EnriqueOlmedo-e4m Рік тому

    Thanks for the Electron series!

  • @NotesNNotes
    @NotesNNotes Рік тому

    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 😅

  • @gabriellicar
    @gabriellicar Рік тому

    🎉

  • @samosborne
    @samosborne Рік тому

    Found you from your electron IPC tutorials but I love devlog content and make my own devlogs. Look forward to following your progress man! 🤝

  • @KajiTetsushi
    @KajiTetsushi Рік тому

    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.

    • @thefool733
      @thefool733 Рік тому

      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.

  • @milhane166
    @milhane166 Рік тому

    Liked and subscribed, I'd love to see the progress!

    • @ehrengrenlund
      @ehrengrenlund Рік тому

      It will definitely take a while, but I will be keeping the channel updated with weekly dev logs!

  • @augustine_codes
    @augustine_codes Рік тому

    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.

    • @ehrengrenlund
      @ehrengrenlund Рік тому

      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.

  • @MMhb-dj1hj
    @MMhb-dj1hj Рік тому

    Please zoom unto your screen or use bigger font. I can't see things without a microscope.

  • @Eragon09
    @Eragon09 Рік тому

    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?

    • @ehrengrenlund
      @ehrengrenlund Рік тому

      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

    • @Eragon09
      @Eragon09 Рік тому

      @@ehrengrenlund great i try see it thanks

  • @highzenburger1829
    @highzenburger1829 Рік тому

    Have you tried the new Protocol handle method? Since they've deprecated previous ones the one is causing a headache in retrieving local files.

    • @ehrengrenlund
      @ehrengrenlund Рік тому

      I have not actually. i will have to check that out