Ten minutes to transform your Web page into Electron App

Based on Electron, React, react-Router, Typescript a desktop douban movie application

Source: github.com/Yangfan2016… Web project source: github.com/Yangfan2016… Author: github.com/Yangfan2016

preface

On 618, I found a 1-yuan electron course on MOOCs, which is a basic introductory course. It’s not bad. I just want to transform the React+Typescript I wrote a few days ago into a simple Douban movie application. This is also cao (CAO) test (XI) Tencent video (MAC app) UI (Tencent video please give me money, 😄)

Let’s take a look at the end result

The preparatory work

First you should have the following basic knowledge

Web Basics (HTML, CSS, JavaScript)
Nodejs for HTTP (building a simple Web server),
Electron basics (building a simple Electron demo, communication between the main process and the renderer)

Project directory

Let’s take a look at the final directory structure

You can use Treer to generate a directory structure

$ npx treer -i "/^(node_modules|dist|build|notes|\.git|\.DS_Store)$/" >tree.txt
Copy the code

Douban - movie - electron ├ ─ yarnrc# Yarn configuration file├ ─ app. Config. Js# Global configuration of app├ ─ main. Js# Main process of app├ ─ package. Json ├ ─ the SRC# Original Web project source code (omitted here)| |... ├ ─ server# API proxy server| ├ ─ app. Js | ├ ─ package. The json | └ yarn. The lock ├ ─ scripts | ├ ─ build. Js | ├ ─ start. Js | └ test. The js ├ ─ public | ├ ─ the favicon. Ico | ├ ─ index. HTML# main window| ├ ─ the manifest. Json | ├ ─ play. The HTML# Play window| └ renderer. Js# Play window rendering process├ ─ config | ├ ─ env. Js | ├ ─ paths. Js | ├ ─ webpack. Config. Js | ├ ─ webpackDevServer. Config. Js | ├ ─ jest | | ├ ─ cssTransform. Js | | └ fileTransform. Js ├ ─ assets# app logo| ├ ─ icon. PNG | └ logo. The PNGCopy the code

Development of attention

The installation

The following package dependencies need to be installed

"DevDependencies ": {"devDependencies": {"devDependencies": {"devDependencies": {"devDependencies": {"devDependencies": {"devDependencies": {"devDependencies": { "^1.18.10" # Listen on file, restart node application}Copy the code

The electron packet is slow to download, so we need to configure it to add.npmrc or.yarnrc files to the project (if your project does not use sass, do not set the mirror address of Node-sass).

.npmrc

registry=https://registry.npm.taobao.org/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
electron_mirror=https://npm.taobao.org/mirrors/electron/

Copy the code

.yarnrc

registry "https://registry.npm.taobao.org/"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
Copy the code

Project reform

Let’s start with a simple electron demo


const { app, BrowserWindow } = require('electron')
const path = require("path");

app.on('ready', () = > {// Create a new window
  let mainWindow = new BrowserWindow({
    width: 1160.height: 720});// The devServer port is 3000 in the original project development environment, we load the original project in the form of url
  mainWindow.loadURL('http://localhost:3000');
});

Copy the code

And then we configurepackage.jsonScript (Nodemon will listen for your file changes and restart Electron without you having to start it every time)


"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "server": "node server/controllers/index.js",
    "electron-dev": "nodemon --watch ./main.js --exec 'NODE_ENV=development electron .'"
}

Copy the code

Run the following command

# parallel execution
$ yarn start & yarn electron-dev

Copy the code

Since it is app, it is different from Web, so we need to optimize the style and draw a prototype first

The recommended online prototype tool is whimsical.com

Then we implement the details, you can see the following effect 😂

Modify the previous player pop-up box

Similarly, referring to Tencent video, a new window will pop up when the video is played. In Electorn, a new window will be created

new BrowserWindow({
  width: 1100.height: 500.titleBarStyle: "hiddenInset"});Copy the code

Now there is the problem of clicking on a movie in the main window to open the play window. Then how to transfer information (such as the SRC address of the video) into the film. We can find the ipcMain and ipcRenderer apis in the electron file. They are used for communication between the main and renderer processes

Project production environment configuration

Since electron uses the file protocol in the production environment, the final version we run cannot be loaded in the form of URL. The modification is as follows


const { app, BrowserWindow } = require('electron')
const path = require("path");
constisProd = process.env.NODE_ENV ! = ="development";

app.on('ready', () = > {// Create a new window
  let mainWindow = new BrowserWindow({
    width: 1160.height: 720});// Production environment
  if (isProd) {
    // The default crA package directory is build, which we need to introduce in our production environment
    mainWindow.loadFile(path.join(__dirname, "./build/index.html"));
  } else { // Development environment
    mainWindow.loadURL('http://localhost:3000'); }});Copy the code

Nodejs API service transformation We need to introduce the NodeJS startup file so that we do not need to start it separately in production environment

First we expose the NodeJS startup app

const Koa = require("koa"); const proxy = require("koa-server-http-proxy"); const app = new Koa(); // proxy app.use(proxy('/api', { target: 'http://api.douban.com/', changeOrigin: true, pathRewrite: { '^/api': '/v2', // override path},})); app.use(proxy('/bing', { target: 'https://www.bing.com/', changeOrigin: true, pathRewrite: { '^/bing': '/', // override path},}));- app.listen(server.port, () => {
- console.log(server.url);
-});
+ module.exports=app;


Copy the code

Then we introduce it in main.js

const apiServer = require("./server/app"); // In production we start our nodejs service directlyif (isProd) {
    // start api server
    apiServer.listen(server.port, () => {
        console.log(server.url);
    });
} else// start webpack-devServer require("./scripts/start");
}

Copy the code

packaging

Use the electron builder package

"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js", "server": "node server/controllers/index.js", "electron-dev": "nodemon --watch ./main.js --exec 'NODE_ENV=development electron .'", "dist": "Rm -rf./dist && electron builder"}, // the configuration of the electron builder" build": {"appId": "Douban-movie-electron ", // Pack the file directory so that the installation package size can be reduced "files": [" package. Json, "" node_modules / * * / *", "build / * * / *", "assets" and "server", "main. Js", "app. Config. Js"], / / MAC the packaging configuration, Detailed configuration https://www.electron.build/configuration/mac "MAC" : {" category ": "public.app-category.video", MAC application classification https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchService sKeys.html#//apple_ref/doc/uid/TP40009250-SW8 "target": [ "dmg" ], "icon": "./assets/icon.png" } },Copy the code

Execute the command


$ yarn dist
Copy the code

The installation

The packaged files will be in the dist folder. We will find the DMG file and install it

file:///static: = //static: = //static: = //static: = //static: = //static: = //static: = //static: = //static: = //static Other JS CSS files are also introduced in relative paths, only image 404, strange 😂)

# browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter # browserRouter

Time is limited, for packing methods and configuration of other platforms, please go to the electron builder official website

summary

The electron is not a new thing. Many cross-end frameworks such as React-Native, Flutter and Weex emerge in an endless stream, greatly expanding our front-end computer’s ability to conduct deep research in broad fields. At the same time, the current front-end has higher and higher requirements. After all, HTML, CSS, and JavaScript are our cornerstone
This project is just for practice, time is tight, spare time to write, everyone for reference only, 👏 welcome to github to find me to play 😄
Peace 👋 have a slow day tomorrow too 😄

Disclaimer: Douban data API from the network, abuse and delete, this application is only for learning to use, do not use for commercial purposes author: github.com/Yangfan2016 source: github.com/Yangfan2016… Protocol: MIT

Tools used in this article: Spanning tree directory: Treer Online prototype diagram: Whimsical Online logo generation: XzLogo