Text Editor

Technology Used

Technology Used	Resource URL
JavaScript	https://developer.mozilla.org/en-US/docs/Web/JavaScript
Node.js	https://nodejs.org/en/
Webpack	https://webpack.js.org/
IndexedDB	https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
Concurrently	https://www.npmjs.com/package/concurrently
Heroku	https://www.heroku.com/home

Table of Contents

• Technology Used
• Table of Contents
• Description
• Code Refactor Example
  • Webpack Configuration
  • Database Functions
  • Installation Functions
• Installation and Usage
• Learning Points
• Author Info
  • Ryan Moscoe
• Credits
• License

Description

Visit the Deployed Site

This progressive web app (PWA) loads a basic text editor in a browser. The editor automatically saves text entered by the user in a client-side database using IndexedDB and retrieves the user's saved text on load. In addition, the user can install the editor as an app for offline use.

Code Refactor Example

Starter code was provided for this project, including an HTML document, CSS stylesheet, and server-side code. Three components of the client-side JavaScript code required completion:

• The webpack configuration file (webpack.config.js)
• The database functions for saving and retrieving data (database.js)
• The installation script (install.js)

Webpack Configuration

The webpack.config.js file initially included the following code:

module.exports = () => {
  return {
    mode: 'development',
    entry: {
      main: './src/js/index.js',
      install: './src/js/install.js'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
      
    ],

    module: {
      rules: [
        
      ],
    },
  };
};

After configuring webpack plugins for a service worker and a manifest file, as well as adding css and babel loaders, the final code looked like this:

module.exports = () => {
  return {
    mode: 'production',
    entry: {
      main: './src/js/index.js',
      install: './src/js/install.js'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: "./"
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html',
        title: 'Just Another Text Editor'
      }),
      new InjectManifest({
        swSrc: "./src-sw.js",
        swDest: "src-sw.js"
      }),
      new WebpackPwaManifest({
        inject: true,
        fingerprints: false,
        name: "Just Another Text Editor",
        short_name: "JATE",
        description: "A progressive web app for text editing",
        background_color: "#ffffff",
        crossorigin: "use-credentials",
        publicPath: "/",
        start_url: "/",
        icons: [
          {
            src: path.resolve("src/images/logo.png"),
            sizes: [96, 128, 192, 256, 384, 512],
            destination: path.join("assets", "icons")
          }
        ]
      })
    ],

    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/transform-runtime'],
            },
          },
        }
      ],
    },
  };
};

Database Functions

Similarly, the database functions were not built out in the starter code:

export const putDb = async (content) => console.error('putDb not implemented');

export const getDb = async () => console.error('getDb not implemented');

The putDB function ultimately took the following form:

export const putDb = async (content) => {
  const jateDb = await openDB("content", 1);
  const tx = jateDb.transaction("content", "readwrite");
  const store = tx.objectStore("content");
  const request = store.put({content});
  const result = await request;
  return result;
}

Installation Functions

Finally, the installation functions were initially empty:

window.addEventListener('beforeinstallprompt', (event) => {});

butInstall.addEventListener('click', async () => {});

window.addEventListener('appinstalled', (event) => {});

Here is the fully built click event handler:

butInstall.addEventListener('click', async () => {
    const promptEvent = window.deferredPrompt;
    if (!promptEvent) {
        return;
    }
    promptEvent.prompt();
    await promptEvent.userChoice;
    window.deferredPrompt = null;
    butInstall.textContent = "Installed";
});

Installation and Usage

To install this application, click the Install button at the top of the screen or the icon in the address bar of the browser. To use the application, enter text or code. The editor automatically saves your entry to the database and retrieves it the next time you launch the page or open the application.

Learning Points

• Progressive Web Apps (PWAs)
• Webpack
• IndexedDB
• Concurrently

Author Info

Ryan Moscoe

• Portfolio
• LinkedIn
• Github

Credits

Starter code provided by Trilogy Education Services, LLC, a 2U, Inc. brand, on behalf of the University of California, Berkeley Coding Boot Camp.

License

See repository for license information.