Month: May 2020

How to Start Developing Electron Application with Vue.js

I’m learning how to develop desktop application using electron with Vue.js. Developing electron application is like developing web application so having one or more good JS framework is a good thing, so I am going to write about how to just do it.

Steps

  1. Install Vue.js globally.
    npm install -g @vue/cli
  2. Execute the following command to install and configure Vue.js for the development environment.
    vue create hoge
  3. Using down arrow key, select Manually select features and hit enter.
    ? Please pick a preset: (Use arrow keys)
    default (bebel, eslint)
    > Manually select features
  4. Using down arrow key, select Router with space and hit enter.
    ? Please pick a preset: Manually select features.
    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    Babel
    TypeScript
    Progressive Web App (PWA) Support
    Router
    CSS Pre-processors
    Linter / Formatter
    Unit Testing
    E2E Testing
  5. Type n and hit enter with the following prompt.
    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
  6. Using arrow key, select ESLint + Prettier and hit enter.
    ? Pick a linter / formatter config: (Use arrow keys)
    ESLint with error prevention only
    EsLint + Airbnb config
    ESLint + Standard config
    > ESLint + Prettier
  7. Select Lint on save and hit enter.
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    Lint on save
    Lint and fix on commit.
  8. Next, select In dedicated config files option.
    ? Where do you prefer placing config for Bebel, ESLint, etc.? (Use arrow keys)
    > In dedicated config files
    In package.json
  9. It’s up to you but I am select N as a option here because I am not planning to use the selection for future projects.
    ? Save this as a preset for future projects? (y/N)
  10. Wait for a while it’s installing and configuring Vue.js for your project.
  11. Navigate into the project directory.
    cd hoge
  12. Next, add the component to build Electron application with Vue.js by entering the following command.
    vue add electron-builder
  13. Select the version of Electron you would like to use and hit enter.
    ? Choose Electron Version (Use arrow keys)
    ^4.0.0
    ^5.0.0
    > ^6.0.0
  14. To test Vue.js enabled Electron application, run the following command.
    npm run electron:serve
  15. To generate distributable files, run the following command.
    npm run electron:build
  16. You will get hoge/dist_electron/hoge-0.1.0.dmg file if you are on MacOS. The file can be distributable to whoever wants to run your application.

Recap

Electron is a way to distribute your web application as a desktop application and having Vue.js as a framework for your UI is a very efficient way to develop your application.

WordPress Migration to OCI: Installing MariaDB and NGINX for WordPress

I will cover how to migrate the data first as it is the essential component to get WordPress site going. In my previous blog post, I covered how to backup data, so please refer to it to back up the existing WordPress data.

Install MariaDB

MariaDB is a forked database engine from MySQL. As far as I remember, it has 100% compatibility with MySQL and it’s completely free.

SSH into the host you provisioned.

$ ssh opc@[IP address for the host]

Install MariaDB on the host.

$ sudo yum install mariadb-server

Start the database server.

$ sudo systemctl start mariadb

Make sure that the service starts on OS start up.

$ sudo systemctl enable mariadb

Start the initial configuration process.

$ sudo mysql_secure_installation

The command above will ask the following questions.

  • Enter current password for root (enter for none): -> Simply hit enter here.
  • Set root password? [Y/n] –> Y
  • New password: –> New password for root credential of MariaDB.
  • Re-enter new password: –> Repeat.
  • Remove anonymous users? [Y/n] –>Y
  • Disallow root login remotely? [Y/n] –> Y or n depending on your need but Y is securer.
  • Remove test database and access to it? [Y/n] –> Y
  • Reload privilege tables now? [Y/n] –>Y

Your MariaDB is now more secured and ready for you to use.

Install NGINX (web server)

I am choosing NGINX for web server to serve the WordPress pages. Follow the steps below to install and configure NGINX.

First, create nginx.repo file under /etc/yum.repo.d/

$ sudo vi /etc/yum.repo.d/nginx.repo

Paste the following text.

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/
gpgcheck=0
enabled=1

Save the file and exit.

:wq

Back in the command line, install the latest NGINX.

$ sudo yum -y install nginx

Start NGINX.

$ sudo systemctl start nginx

Make sure NGIX survives the restart.

$ sudo systemctl enable nginx

Make sure the host can accept incoming traffic to HTTP and HTTPS.

$ sudo firewall-cmd --add-service=http --permanent --zone=public
$ sudo firewall-cmd --add-service=https --permanent --zone=public
sudo firewall-cmd --reload

If you browse to http://[Your public IP address], you will see welcome screen from NGINX.

Recap

I am planning to cover how to restore data in MariaDB and configure it in the next blog. More to come!