https://github.com/jaayperez/markdown-test
(Live) real-time raw Markdown Editor in Vue.js
https://github.com/jaayperez/markdown-test
bootstrap4 markdown markdown-editor pusher real-time tool vue vue-cli vue3 vuejs
Last synced: 12 months ago
JSON representation
(Live) real-time raw Markdown Editor in Vue.js
- Host: GitHub
- URL: https://github.com/jaayperez/markdown-test
- Owner: jaayperez
- License: mit
- Created: 2021-07-31T12:52:34.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T03:31:42.000Z (almost 3 years ago)
- Last Synced: 2025-02-01T04:11:05.632Z (over 1 year ago)
- Topics: bootstrap4, markdown, markdown-editor, pusher, real-time, tool, vue, vue-cli, vue3, vuejs
- Language: Vue
- Homepage: https://jaayperez.github.io/markdown-test/
- Size: 2.58 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## Build a real-time markdown editor with [Vue](https://vuejs.org/)
This project contains the source code for a real-time markdown editor built with [Vue.js](https://vuejs.org/) and [Pusher](https://pusher.com/).
## Getting Started
## Prerequisites
1. You will need the following things properly installed on your computer.
* [Node.js](https://nodejs.org/) (with npm)
* [Vue CLI](https://cli.vuejs.org/)
* [Google Chrome](https://google.com/chrome/)
2. Create a Pusher application - Create a new application on your Pusher Dashboard to get your app credentials.
### Clone the repository
```bash
$ git clone https://github.com/jaayperez/markdown-test.git
```
### Change directory
```bash
$ cd markdown-test
```
### Install dependencies
```
npm install
```
## Create a `.env` file in the root of the new directory with the content below:
```ini
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`:
```ini
let pusher = new Pusher("YOUR_APP_KEY", {
cluster: process.env.PUSHER_APP_CLUSTER,
...
});
```
### Run the application
```bash
$ npm start
```
## Start the server
```bash
node server
```
* Visit your app at [http://localhost:8080](http://localhost:8080).
## Built With
* [Vue.js](https://vuejs.org/) - A progressive JavaScript framework for building applications
* [Pusher](https://pusher.com/) - A Node.js client to interact with the Pusher REST API