Giter VIP home page Giter VIP logo

puppeteer-electron-quickstart's Introduction

puppeteer-electron-quickstart

Quickstart project to run puppeteer library from an electron application. Using ES-6 and babel.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Package Manager

Yarn is the suggested package manager, since electron suggests it too.

Installing

  1. Clone the project
  2. run yarn to download needed packages

Project Info

Electron application

  1. electron_main.js: the main file that will run from our electron application
  2. index.html: the UI of our electron application.
    • Currently contains only the a div where all the logs will be shown
    • In this file we need to load all our custom js files. This is done from copy-babel-output npm script

Puppeteer

To run puppeteer inside electron we use puppeteer-core library, which uses chrome instance installed in the client machine. Puppeteer is initialized in puppeteer-wrapper.js.

  1. The script is checking default chrome patch. Depending on the OS where the app is running this path will be:
    • for Windows: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
    • for mac: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
  2. If the executable exists in another directory this has to be set in Documents/application-folder/settings.json

Main Program

The main functionality is in src folder.
index.js is the starting point of our application.

Helper libraries

  1. logger.js
    simple logger that writes to our div in index.html file
  2. file-paths.js
    • Source of truth about where all file paths the application is using. Using this library to avoid hardcoding file paths in different places
    • When application starts creates a folder inside user's Documents folder where all files will be saved

package.json scripts

  1. babel_build: converts all .js files inside src folder to es2015 in babel-output folder, so they can be required in index.html file without errors (electron uses es2015)
  2. copy-babel-output: grabs all .js files from babel-output folder and adds a require for them in index.html
  3. start: the main script to start the electron app. Call the two previous scripts before starting the app with the app-to-date code
  4. start_dev: you can use this script in case you need to run the code from node and not inside an electron app
  5. dist: script used to product an electron app installer inside the dist folder. Like start, this script calls the two first scripts to make sure the code is up to date before building the installer

License

This project is licensed under The Unlicense - see the LICENSE file for details

puppeteer-electron-quickstart's People

Contributors

loukaspd avatar

Watchers

 avatar  avatar

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.