Electron-vue: Milestone Minimize, Project Update

[SimulatedGREG]

Thank You.

Wow, thank you guys so much for helping make electron-vue one of the top 3 vue-cli templates (that I can find) on GitHub. I never thought this project would ever take off like it has today. Thinking back, I originally made this boilerplate (in May 2016) for a personal closed sourced project and decided to open source (the boilerplate itself) when I knew I had a majority of the pieces together. Fast-forward almost a full year and there have been so many new features implemented and amazing support from the community. I also want to give a special shoutout to those in the community helping answer issues when I'm not able to. You guys have absolutely no obligation to do anything but you do anyway, and I am grateful for that.

A Quick Update

So aside from expressing my appreciation, I would like to give a little update. You may or may not have noticed, but I have been away from the project for a few months now and haven't pushed many updates or changes. I've usually been on top of closing issues within a few days of receiving them, but now there are currently 16 open issues! Anyways, in short I recently started a full time position as a UI/UX Engineer working with Vue.js (of course). It has easily taken a lot of my time, but I believe that I am finally back to a steady schedule and feel more confident about maintaining electron-vue once again on a consistent pace. On a related note, I have a lot of credit to give this project for getting me the job as well. So let's talk about what's coming up...

Milestone: Minimize

The main premise of Minimize is to move the project structure to a single package.json setup. This was not possible back when I started this boilerplate, but thanks to community efforts both electron-packager and electron-builder now support these setups. Along with this, efforts will be made to rewrite development and build scripts to provide better feedback and reliability. Please feel free to comment below any questions or suggestions; your feedback is everything to this project.

Features will be merged to dev upon competition and can be tested out with...

vue init simulatedgreg/electron-vue#dev my-project

Upcoming Features

• [x] Single package.json structure #112
• [x] Replace vue-resource with axios #152
• [x] Default to Runtime + Compiler build of Vue.js #168
• [x] Support Web output #128
• [x] Include AppVeyor/Travis CI configurations for electron-builder users #141
• [x] Newly designed first-run landing page
• [x] Update development environment to conform to vuejs-templates/webpack's direction
• [x] Rewrite development scripts to provide better feedback on warning/errors, and possibly give direction to potential solutions (similar to the helpful error messages provided by Vue.js when developing)
  feat/dev-scripts
  
  
  
  • [x] Start both main & renderer webpack processes
  
  
  • [x] Start electron process once both webpack processes are ready
  
  
  • [x] Enable hot-reloading in renderer process for developing vue application
  
  
  • [x] Restart main process when main process webpack rebuilds
  
  
  • [x] Push all console messages (from all 3 processes) to one terminal in an organized and meaningful way
  
  
  • [x] Implement better build step that can stop build process when problems occur and provide error messages
  
  
• Support main process debugging #149 (electron@^1.7.2 will be adding support for Node's Inspector Agent, making this process super simple with Chrome) [[electron/electron#6634](https://github.com/electron/electron/issues/6634)]
• [x] Replace UglifyJS with Babili to better target es2015 features available in Node 7/Chromium (removes the need to transpile completely to ES5) #175
• [x] Scaffolding option Auto update functionality for electron-builder users (community suggestion) [@abishekrsrikaanth]

Bugfix

• Ensure dependencies are treated as externals in testing environments #170 (karma-webpack issue)
• [x] Ensure main process environment better matches in development and production

Documentation Updates

• [x] Multi-lingual support (Chinese, Japanese) [looking for volunteers] #155
• [x] Describe use of local filesystem for static assets #165
• [x] Add more FAQs related to most recently closed issues
• Add use cases of adding pre-processor loaders #163
• [x] Migration guide (community suggestion) [@abishekrsrikaanth]
• [x] Describe usage with component libraries that have pure *.vue files #142
• [x] Recommend the use of yarn package manager

Extras

• Project examples (similar to https://vuejs.org/v2/examples/index.html, but more focused on electron capabilities) [SoC]
• [x] Featured Community Projects (links to real world projects that the community has made with electron-vue)

Once again, please feel free to comment any questions or suggestions below.

[abishekrsrikaanth]

@SimulatedGREG, This is a pretty good plan. I would like to suggest the following to this list:

• Migration guide for existing projects to move to the new structure.
• Template configurations for Crash Reporter on the new structure
• Template configurations to setup auto updates if required by an application.

[rdpascua]

It would be very useful to know how to use node modules in the projects, like using sqlite in vue-electron.

[SimulatedGREG]

@abishekrsrikaanth
Thanks for your suggestions! Could you expand what you mean by adding a Crash Reporter?

@rdpascua
I plan to add items like this in the project examples. Great suggestion!

[abishekrsrikaanth]

@SimulatedGREG Electron Supports the Crash Reporter out of the box, but with the current structure, IMO, I am quite confused on what is the best practice to set this up. If the code for this is already setup on the Base Code Template ( could be commented out or not). It might be easy to configure the crash reporter as required by the developer.

[SimulatedGREG]

@abishekrsrikaanth

The Crash Reporter baked into electron isn't super extensive to set up manually so I'll be leaving this one out.

[abishekrsrikaanth]

Converted my existing application to use the new #dev branch.

1. Everything seems to work perfectly in terms of development and running the application for development.
2. Converted to axios all good.
3. Used the electron-builder for the first time to generate a build for testing. Doesn't set the env to production. I have been use the packager before, but started using the builder for this one. Not sure if I am missing something in terms of configuration that changes the environment.

Where should bugs/issues relating to dev branch be added?

[SimulatedGREG]

@abishekrsrikaanth

Thanks for the feedback, and glad to hear the switch to axios was simple. I believe to have found the issue with the environment not being set to production as well. Any issues related to dev branch can be posted here.

[SimulatedGREG]

Okay, so I've been rewriting the development scripts and having trouble finding a clean solution. Here's what I'm wanting the end product to do...

• [x] Start both main & renderer webpack processes
• [x] Start electron process once both webpack processes are ready
• [x] Enable hot-reloading in renderer process for developing vue application
• [x] Restart main process when main process webpack rebuilds
• [x] Push all console messages (from all 3 processes) to one terminal in an organized and meaningful way

I've been experimenting with using chalk and trying to surround each process's console logs with starting and ending blocks, but it doesn't really feel like the cleanest approach to this problem. I've also brought in friendly-errors-webpack-plugin that's found in the official vuejs-templates/webpack template. This plugin alone is the main inspiration for making something clean. I'm also considering forking this plugin to make it work without the need of webpack so it can be manually fed inputs to process. There is also potential for trying out blessed-vue.

If you are interested, you can take a look at the current state in the feat/dev-scripts branch and can try with...

vue init simulatedgreg/electron-vue#feat/dev-scripts my-project

Please feel free to leave any suggestions down below.

Update: The above features have been merged to dev.

[abishekrsrikaanth]

👍 for friendly-errors-webpack-plugin

Any plans to integrate electron-forge for the various deployment options it offers?

[SimulatedGREG]

Alright, I think I finally found a clean way to show the logs. Here here's what it looks like right now in the dev branch. Last thing to consider is the friendly-errors-webpack-plugin logging.

[SimulatedGREG]

:tada: Almost there!

Good news, nearly all tasks for this Milestone are complete! There is still plenty of documentation to be updated, so until that is squared away a major push to master should be happening soon.

Currently looking to get started on project examples and (SoC) featured community projects. Please comment below any project examples you have in mind or submit [of] your own electron-vue projects to get featured.

[SimulatedGREG]

✨ Checklist complete!

It looks like all items for this Milestone have been completed. Documentation has also been heavily overhauled to describe all of the new features. There are still a few things left on my personal task list to check out, but I will be planning to release merge to the master branch shortly after the [email protected] release comes out. This release will support Node's Inspector Agent to make main process debugging a breeze.

A big thank you to everybody that has tried out the dev branch and provided generous feedback about issues and suggestions.

[rdpascua]

I've tried the dev branch on Ubuntu 16.04 using latest node, I've tried editing the main script file (main process). Yes it restarts and then crash without error, anyway to debug this? Thankyou for your greate work on this :+1:

[SimulatedGREG]

In an attempt to implement versioning on scaffolded projects, there will be a new commit SHA link on the generated README.md file.

Shoutouts to @qazbnm456's lulumi-browser for this idea.

[SimulatedGREG]

@rdpascua

I'm aware of the electron restart issue. It seems I'm not getting a constant termination signal across platforms. Will be fixing this before release.

[SimulatedGREG]

🎉 It's Here! 🎉

Milestone Minimize is officially in the master branch of this repo and can be used of course with...

vue init simulatedgreg/electron-vue my-project

There has been quite a number of changes, so make sure to take a look at the updated documentation to find out more about the new single package.json structure and some new features like the __static global variable.

Commit: https://github.com/SimulatedGREG/electron-vue/commit/2c29ea1b55bdb24ac625f57466e5aac3c366681a
Documentation: https://simulatedgreg.gitbooks.io/electron-vue/content/index.html
CI Test: https://semaphoreci.com/simulatedgreg/electron-vue/branches/master/builds/216

---

electron-vue needs translators!!!

If you would like to help translate the documentation, specifically to Chinese, please take a look at #155. The project structure has already been setup and is waiting for contributions.