Giter Site home page Giter Site logo

soulehshaikh99 / create-vuepress-electron-app Goto Github PK

View Code? Open in Web Editor NEW
4.0 2.0 1.0 215 KB

Discover the easiest way to get started with the blend of VuePress and Electron JS App

License: MIT License

JavaScript 86.31% Vue 7.96% CSS 5.73%
cross-platform native-app installed-app desktop-applications windows linux macos html css javascript

create-vuepress-electron-app's Introduction

Electron VuePress Crossover Banner

The boilerplate code to get started creating Cross-platform Desktop Apps with Electron and VuePress as front-end technology.

forthebadge    forthebadge

forthebadge   forthebadge   forthebadge

js-standard-style

✒️ Overview

The aim of this project is to provide Web Developers using vuepress the power to create cross-platform desktop apps using electron.

🧐 What packages does the project use?

electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.

electron-builder is used as a complete solution to package and build a ready for distribution (supports Numerous target formats) Electron app with "auto update" support out of the box.

electron-serve is used for Static file serving for Electron apps.

vuepress is a Vue-powered Static Site Generator. Simplicity First: Minimal setup with markdown-centered project structure helps you focus on writing. Vue-Powered: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. Performant: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.

concurrently is used to run multiple commands concurrently.

wait-on is used as it can wait for sockets, and http(s) resources to become available.

🚀 Getting Started

Note: If you wish to use npm over yarn then modify package.json by replacing yarn with npm in electron-dev and preelectron-pack scripts. But I strongly recommend using yarn as it is a better choice when compared to npm.

🤓 Use this boilerplate

# Clone the Project

# Use degit scaffolding tool
$ npx degit soulehshaikh99/create-vuepress-electron-app create-vuepress-electron-app
# or GitHub CLI Users
$ gh repo clone https://github.com/soulehshaikh99/create-vuepress-electron-app.git
# or Normal Git Users
$ git clone https://github.com/soulehshaikh99/create-vuepress-electron-app.git

# Switch location to the cloned directory
$ cd create-vuepress-electron-app

# Install dependencies
$ yarn # or npm install

# Run your app
$ yarn electron-dev # or npm run electron-dev

# Package Your App
$ yarn electron-pack # or npm run electron-pack

💫 Create this boilerplate from scratch (Manual Setup)

1) Use the create-vuepress-site generator which will help scaffold the basic VuePress site structure for you.

$ yarn create vuepress-site
# npx create-vuepress-site

2) Rename docs directory to any project-name of your choice.

$ move docs create-vuepress-electron-app

3) Switch to project directory

$ cd create-vuepress-electron-app

4) Install Development Dependencies

$ yarn add --dev electron electron-builder wait-on concurrently vuepress
# npm i -D electron electron-builder wait-on concurrently vuepress

5) Install Production Dependency

$ yarn add electron-serve # or npm i electron-serve

6) Your dependencies should look something like this

"dependencies": {
  "electron-serve": "^1.0.0"
},
"devDependencies": {
  "concurrently": "^5.3.0",
  "electron": "^10.1.0",
  "electron-builder": "^22.8.0",
  "vuepress": "^1.5.4",
  "wait-on": "^5.2.0"
}

7) Create public directory inside src/.vuepress

# Windows Users
$ mkdir src\.vuepress\public

# Linux and macOS Users
$ mkdir -p src/.vuepress/public

8) Download the app icon

favicon.png and place it in the public directory.

9) Paste vuepress configuration in src/.vuepress/config.js file

module.exports = {
    // Changes vuepress build directory
    dest: 'build'
};

10) Create main.js file (serves as entry point for Electron App's Main Process)

# Windows Users
$ fsutil file createnew main.js 0
# notepad main.js

# Linux and macOS Users
$ touch main.js

11) Paste the below code in main.js file

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require("electron");
const path = require("path");
const serve = require("electron-serve");
const loadURL = serve({ directory: "build" });

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function isDev() {
  return !app.isPackaged;
}

function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
    // Use this in development mode.
    icon: isDev()
      ? path.join(process.cwd(), "src/.vuepress/public/favicon.png")
      : path.join(__dirname, "build/favicon.png"),
    // Use this in production mode.
    // icon: path.join(__dirname, 'build/favicon.png'),
    show: false,
  });

  // This block of code is intended for development purpose only.
  // Delete this entire block of code when you are ready to package the application.
  if (isDev()) {
    mainWindow.loadURL("http://localhost:8080/");
  } else {
    loadURL(mainWindow);
  }

  // Uncomment the following line of code when app is ready to be packaged.
  // loadURL(mainWindow);

  // Open the DevTools and also disable Electron Security Warning.
  // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
  // mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on("closed", function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });

  // Emitted when the window is ready to be shown
  // This helps in showing the window gracefully.
  mainWindow.once("ready-to-show", () => {
    mainWindow.show();
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") app.quit();
});

app.on("activate", function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) createWindow();
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

12) Update the script section of package.json

# Add this scripts
"electron": "wait-on http://localhost:8080 && electron .",
"electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
"preelectron-pack": "yarn build",
"electron-pack": "electron-builder"

# You should end up with something similar
"scripts": {
  "dev": "vuepress dev src",
  "build": "vuepress build src",
  "electron": "wait-on http://localhost:8080 && electron .",
  "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
  "preelectron-pack": "yarn build",
  "electron-pack": "electron-builder"
}

13) Add the following configuration in package.json

Note: build configuration is used by electron-builder, modify it if you wish to add more packaging and native distribution options for different OS Platforms.

"main": "main.js",  # Application Entry Point, please verify entry point is set to main.js
"build": {
  "icon": "src/.vuepress/public/favicon.png",
  "productName": "VuePress and Electron App",
  "files": [
    "build/**/*",
    "main.js"
  ],
  "win": {},  # Windows Specific Configuration
  "linux": {},  # Linux Specific Configuration
  "mac": {}  # MacOs Specific Configuration
}

14) Test drive your app

# Run your app
$ yarn electron-dev # or npm run electron-dev

# Package Your App
$ yarn electron-pack # or npm run electron-pack

💯 Result

Electron VuePress Window Screeenshot

😍 Made with ❤️ from Souleh

forthebadge

📋 License:

Licensed under the MIT License.

create-vuepress-electron-app's People

Contributors

soulehshaikh99 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

windsone

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.