Build a real-time markdown editor with Vue

This project contains the source code for a real-time markdown editor built with Vue.js and Pusher.

Getting Started

Prerequisites

1. You will need the following things properly installed on your computer.

• Node.js (with npm)
• Vue CLI
• Google Chrome

2. Create a Pusher application - Create a new application on your Pusher Dashboard to get your app credentials.

Clone the repository

$ git clone https://github.com/jaayperez/markdown-test.git

Change directory

$ cd markdown-test

Install dependencies

npm install

Create a .env file in the root of the new directory with the content below:

PUSHER_APP_ID=YOUR_APP_ID
PUSHER_APP_KEY=YOUR_APP_KEY
PUSHER_APP_SECRET=YOUR_APP_SECRET
PUSHER_APP_CLUSTER=YOUR_APP_CLUSTER

Add Pusher Credential to HomeComponent

Open ./src/components/HomeComponent.vue and update with the appropriate credentials as obtained from your Pusher dashboard YOUR_APP_KEY and CLUSTER:

    let pusher = new Pusher("YOUR_APP_KEY", {
      cluster: process.env.PUSHER_APP_CLUSTER,
      ...
    });

Run the application

$ npm start

Start the server

node server

• Visit your app at http://localhost:8080.

Built With

• Vue.js - A progressive JavaScript framework for building applications

• Pusher - A Node.js client to interact with the Pusher REST API