An WIP Minecraft Launcher based on electron-vue
Alpha: Cover the basic features that the official launcher have.
- Official Login
- Basic profile management
- Skin Preview/Download/Upload
- Show logs during launch
- Show crash report after crash
Beta: Cover the basic features related to mods.
- Manage mods resources and launch with selected mods.
- Be able to install Forge/Fabric on corresponding Minecraft version.
- Be able to detect mod version with Forge/Fabric version and Minecraft Version (detect mod compatibility).
Want to know exact features we have? See Feature Design vs Implemenatation
This project is using nodejs + electron + vue.
- main => main process, the guard process. Store most of the states of launcher. It contains three main part and loaded in following order:
- config.js => config boot loader, this will load first
- store => directory that contains server store template
- windowsManager.js => the basic manager for windows
- renderer => renderer process, store the single state tree and display UI
- universal => some universal things across the main/renderer
- store => the definition of store
- static => static resources
- locales => all the localization files
Core minecraft launcher logic is implemented launcher-core. Therefore some bugs might be cased by this.
The launcher is composed by "server/client" or "main/renderer". They communicates with each other by electron's ipc main and ipc renderer.
The main is the "backend" of the launcher. It manages the windows, and all the persistent data/state of the app. It manages the state by vuex. Once the state/data has been modified by a vuex commit, it will broadcast a ipc message containing the mutation info the all the renderer. At the same time, it will trigger the save action of the modified module to write the change on disk.
The renderer is/are just (a) browsers which communicate with main. It maintains a copy of the store. (I can be a full copy, or a partial copy) User's input will trigger an action or commit, and it will be sync to the main. Though, it does't require any extra action for developer. The local commit and action will automatically send to main. The developer can treat the renderer as a normal vue application.
The project is mainly written by js. Though, by adding tricky typescript definition files (d.ts), we can have useful code snippets even for vue commit/dispatch! That really save my brain and improve the productivity. See the store definition file for more details.
This project is designed to easy to dev... hopefully.
The installation might be the most hard part.
The development environment require 3 things:
- Nodejs version >= 10
- python 2.7
- msbuild (Sindows) , clang (MacOs), gcc (linux desktop)
If you have neither python 2.7 nor msbuild, you should try
windows-build-tools. It really simplify the verbose installation process. You can just run npm install --global windows-build-tools and wait it done.
Notice that the visual studio installation process is really slow. Some time the process will FREEZE. You can terminate the installation process and run the installation command again.
Python 2.7 should be built in. You should install XCode in addition.
Never tried. I don't have a linux desktop machine.
打开你的 git bash，在npm i前面加上registry=https://registry.npm.taobao.org electron_mirror="https://npm.taobao.org/mirrors/electron/"。使用国内阿里提供的npm以及electron的镜像。
最终输入的command也就是
registry=https://registry.npm.taobao.org electron_mirror="https://npm.taobao.org/mirrors/electron/" npm i# optional on Windows to install build tools
npm install --global windows-build-tools
# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production, don't run this unless you really want to make a product env.... use npm run dev to dev
npm run build
# run unit tests, whereas no tests yet
npm testThe launcher core is in seperated project written in typescript.
At the same time, the launcher core logic is guard by typescript definition file. Since the project enable the checkJs option in jsconfig.json. The vscode editor will perform type check on the vuex store part, which enable the type intellisense on usage of vuex.
For example, you will get intellisense during you write the vuex module:
Also, the vscode will hint you in .vue files:
You may already notice that, in .vue file, it uses $repo but not $store property to access vuex store. This is just a redirect. $repo is just another reference of $store. It's necessary to let the type system accept my type definitoin.
Each vuex module has a corresponding definitoin file. If you want to add a state/getter/mutation/action to a module, you should firstly add the definition of that state/getter/mutation/action in the definition file.
The project overwrite the some vue/vuex definition. You can check this file to see the implemantion detail.
The project includes vscode debugger configs. You can add breakpoint on line and debug. Currently, VSCode debugger method only supports debug on main process.
(You can use chrome devtool for renderer process anyway)
We have two options now:
- Electron: Main (npm)
- Electron: Main (attach)
Please use the attch option since the first one not work now.
With attach option, you should first run npm run dev, and then attach debugger by VSCode debugger UI.
This project follow the conventional commits. In short, the first line of your commit message should be:
commit type: commit description
There are several avaiable commit type: feat, fix, refactor, style, docs, chore, test.
Refer from this gist:
feat: (new feature for the user, not a new feature for build script)
fix: (bug fix for the user, not a fix to a build script)
docs: (changes to the documentation)
style: (formatting, missing semi colons, etc; no production code change)
refactor: (refactoring production code, eg. renaming a variable)
test: (adding missing tests, refactoring tests; no production code change)
chore: (updating grunt tasks etc; no production code change)
Your commit will be rejected if you do not follow these rules.
Here we list the features & corresponding files to implement the features.
| Feature | Core Logic File | Related Vuex Actions | Who Trigger | UI |
|---|---|---|---|---|
| User Login | user.js | login | User by UI | DialogLogin.vue |
| User Skin Display | user.js | refreshSkin | - | UserPage.vue |
| User Skin Upload | user.js | uploadSkin | User by UI | UserPage.vue |
| User Mojang Identity Validataition | user.js | checkLocation, getChallenges, submitChallenges | Launcher Initialize, User by UI | UserPage.vue |
| User Logout | user.js | logout | User by UI | UserPage.vue |
| Launch Profile Creation | profile.js | createProfile, createAndSelectProfile | User by UI | ProfilesPage.vue |
| Server Profile Creation | profile.js | createProfile, createAndSelectProfile, createProfileFromServer | User by UI | ProfilesPage.vue |
| Edit Basic Profile Setting | profile.js | editProfile | User by UI | BaseSettingPage.vue |
| Edit Launch Setting (Java) | profile.js | editProfile | User by UI | AdvancedSettingPage.vue |
| Select Mods to Launch | profile.js | editProfile | User by UI | ModSettingPage.vue |
| Select Resource Packs to Launch | profile.js | editProfile | User by UI | ResourcePackSettingPage.vue |
| Modify Game Setting | profile.js | mutation: gamesettings | User by UI | GameSettingPage.vue |
| Select Launch Version | profile.js | editProfile | User by UI | VersionSettingPage.vue |
| Ping Server | profile.js | pingServer | User by UI | HomePage.vue |
| Ping All Servers in a Profile | profile.js | pingServers | User by UI | HomePage.vue |
| Import Modpack | profile.js | importProfile | User by UI | HomePage.vue |
| Export Modpack | profile.js | exportProfile | User by UI | HomePage.vue |
| Diagnose Profile (Detect Problems) | diagnose.js | diagnoseProfile | Any Changes by editProfile | - |
| Fix Profile Problems | diagnose.js | fixProfile | User by UI | HomePage.vue |
| Auto Detect Java Location on Disk | java.js | refreshLocalJava | Launcher Initialize | - |
| Install Java | java.js | installJava | User by UI | JavaWizard.vue |
| Fetch Minecraft Versions List | version.js | refreshMinecraft | Launcher Initialize | VersionSettingPage.vue |
| Fetch Forge Versions List | version.js | refreshForge | User by UI, Launcher Initialize | VersionSettingPage.vue |
| Install Minecraft Version | version.js | installMinecraft | User Fix Problems | - |
| Install Forge Version | version.js | installForge | User Fix Problems | - |
| Scan Installed Versions on Disk | version.js | refreshVersions | User Fix Problems | - |
| Install Version Missing Dependencies | version.js | installDependencies | User Fix Problems | - |
| Import Mods | resource.js | importResource | User by UI | ModSettingPage.vue |
| Import Resource Packs | resource.js | importResource | User by UI | ResourcePackSettingPage.vue |
| Display Mod Compatibility | universal/utils/versions.js | - | UI Initialize | ModCard.vue |
| Display Resource Pack Compatibility | universal/utils/versions.js | - | UI Initialize | ResourcePackCard.vue |
Jin, LG, Phoebe, Sumeng Wang, Luca, Charles Tang
This project was generated with electron-vue using vue-cli. Documentation about the original structure can be found here.