Creating a text editor in Electron: part 1 - Reading files
Tags: electron, javascript, node
Published: 2018-09-05 09:56:24

---
title: Creating a text editor in Electron: part 1 - Reading files
published: true
description: creating a text editor with electron
tags: electron, javascript, node
series: Creating a text editor in Electron
---


Let's start by creating the `package.json` file, and installing the required packages

```json
{
  "name": "intro-to-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electromon main.js  --ignore static"
  },
  "author": "Aurel Kurtula",
  "license": "ISC",
  "dependencies": {
    "electromon": "^1.0.10",
    "electron": "^2.0.8"
  }
}
```

Now we need to create the `main.js` file. This is where our electron app is going to start from: 

```javascript
const { app, BrowserWindow } = require('electron')
const path = require('path')

app.on('ready', function(){
    let window = new BrowserWindow({width:800, height:600})
    window.loadURL(path.join('file://', __dirname, 'static/index.html'))
})
app.on('close', function() {
    window = null
})
```

When the app is ready we create a window, load a static file to be rendered in. When the app closes, we make sure the browser window is removed. 

Let's create the `static/index.html` file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello World!</title>
  <link rel="stylesheet" href="./styles/main.css">
</head>
<body class="index">
  <div class="container">
    <ul id="titles"></ul>
    <div id="content" contenteditable="true">
        <p>Select a title <br />  &#x2190</p>
    </div>
  </div>
  <script src="scripts/index.js"></script>
</body>
</html>
```

It's simple really, `#titles` will have file titles and the `#content` will show their content. As you can see, it's the usual front end stuff. We have CSS and javascript.

## Reading system files

I created a bunch of markdown files, placed them in a `./data` directory and now we'll read them and add the titles to the app. We'll do that in `static/scripts/index.js`

```javascript
const fs = require('fs')
const path = require('path')
const { readTitles } = require(path.resolve('actions/uiActions'))
readTitles('./data').map(({title, dir}) => {
    el = document.createElement("li");
    text = document.createTextNode(`${title.split('.md')[0]}`);
    el.appendChild(text)
    el.addEventListener('click', function(e){ // clicking on sidebar titles
        fs.readFile(dir, (err, data) => {
        if (err) throw err;
        fileDir = dir;
        document.getElementById('content').innerHTML = data;
        });
    })
    document.getElementById('titles').appendChild(el)
}) 
```

In the third line I just require my module `readTitles` which simply reads the title and returns them as array object. I look through them, create a list element, then add an event listener which injects the contents of the file in the `#content`

![](https://thepracticaldev.s3.amazonaws.com/i/7cu9ru56acuath88r4m0.gif)

I think this is a good point to end this introductory tutorial. 

Note that the window is just a chrome browser, you are able to open dev tools on it. You can do so as usual from the view menu or you could get electron to open devtools on start. It can be done in `./main.js` page

```javascript
window.webContents.setDevToolsWebContents(devtools.webContents)
window.webContents.openDevTools({mode: 'detach'})
```

Next time we'll start editing our data files and create our own custom menu

View code at [github. Branch: part1](https://github.com/aurelkurtula/Texty/tree/part1)

{% link https://dev.to/aurelkurtula/creating-a-text-editor-in-electron-part-2---writing-files-l80 %}