VueBLR - Begin Again Workshop

# Initial Commit

# Create new npm project

Create new project
```
npm init
```
Make project private Add "private": true to package.json

# Create "Hello World" Application

Add App.vue to src/ directory
Create minimal "Hello World" application

# Run the application in development mode

Install Vue
```
npm add vue
```

Install Vue CLI

npm add -D @vue/cli @vue/cli-service-global

Create index.js file in src/ directory Instanciate a vue instance with <App> component. Mount the app instance on #app element.
Add script dev to run application in development mode
```
npm run dev
```

# Configure testing environment

Install jest and vue test utils
```
npm add -D jest @vue/test-utils
```

Install jest transformers

npm add -D vue-jest babel-jest babel-preset-env

Configure jest Add .vue to file extensions Add transformer for vue Add transformer for es6 Add module name alias for src directory
Configure babel Add .babelrc with test env configuration
Write tests for App.vue Check App component renders Hello World text.

# Create `<Editor>` Component

Create Editor.vue file in src/components directory
Create Editor.spec.js file in test/components directory
Write unit tests for <Editor> component Ensure it has a name. Ensure it has correct props. Ensure it emits correct event on change.
Write minimal code required to pass all tests.
Use <Editor> component in <App> component Write unit test for <App> component. Ensure it renders <Editor> component. Write minimal code required to pass all tests.
Add CSS to Editor.vue Start vue dev server. (npm run dev) Preview the <Editor> component in browser. Write required style in style inspector. Move final styles to Editor.vue file.

# Create `<Markdown>` Component

Create Markdown.vue file in src/components directory
Create Markdown.spec.js file in test/components directory
Write unit tests for <Editor> component Ensure it has a name. Ensure it has correct props. Ensure it renders correct HTML for given markdown string. Ensure it sanitizes markdown string.
Install marked
```
npm add marked
```
Write minimal code required to pass all tests.
Use <Markdown> component in <App> component Write unit test for <App> component. Ensure it renders <Markdown> component. Write minimal code required to pass all tests.
Add CSS to Markdown.vue Start vue dev server. (npm run dev) Preview the <Markdown> component in browser. Write required style in style inspector. Move final styles to Markdown.vue file.

# Add support for emojis in `<Markdown>` component

Write unit tests for <Markdown> component Ensure it renders image for imoji. Ensure it has correct alt text. Ensure it has correct src url.
Write minimal code required to pass all tests.

# Create Icon components

Install vue-server-renderer jest-serializer-vue

npm add -D vue-server-renderer jest-serializer-vue

Create Icon directory in src/components directory
Create icon components with svg template
Write snapshot test for each Icon component

# Create `<MarkdownEditor>` Component

Create MarkdownEditor.vue file in src/components directory
Create MarkdownEditor.spec.js file in test/components directory
Write unit tests for <MarkdownEditor> component Ensure it has a name. Ensure it has correct props. Ensure it emits correct events. Ensure it renders slots correctly. Ensure it displays correct stats. Ensure it renders both <Markdown> and <Editor> components.
Write minimal code required to pass all tests.
Add CSS to MarkdownEditor.vue Start vue dev server. ./node_modules/.bin/vue serve src/components/MarkdownEditor.vue Preview the <MarkdownEditor> component in browser. Write required style in style inspector. Move final styles to MarkdownEditor.vue file.

# Add support for client side routing

Install vue-router
```
npm add vue-router
```
Create router.js file in src/ directory Register vue-router plugin Export a history router
Use router in the application Add router to Vue constructor options
Use <router-view> component in App.vue to render routes
Remove App.spec.js

# Create `/notes/create` page

Create Create.vue file in src/pages/ directory Use <MarkdownEditor> component to create new note.
Register /notes/create route with Create.vue file
Add CSS to Create.vue Start vue dev server. (npm run dev) Goto /notes/create page. Write required style in style inspector. Move final styles to Editor.vue file.

# Create `/notes` page

Create Home.vue file in src/pages/
Register /notes route with Home.vue Add redirect rule for / route.

# Add support for centralized state management

Install vuex
```
npm add vuex
```
Create store.js file in src/ directory Register vuex plugin Expose a Store instance
Use store in the application Add store to Vue constructor options

# Create `<Note>` Component

Create Note.vue file in src/components directory
Create Note.spec.js file in test/components directory
Write unit tests for <Note> component Ensure it has a name. Ensure it has correct props.
Write minimal code required to pass all tests.
Use <Note> component in /notes page
Add CSS to Editor.vue Start vue dev server. (npm run dev) Preview the <Note> component in browser. Write required style in style inspector. Move final styles to Note.vue file.

# Add note create and update functions

Add create and update actions
Add CREATE and UPDATE mutations
Add computed getters Get note by ID Get notes sorted by last updated at

# Link `/notes/create` page with vuex store

Create note Watch for changes and persist before navigating away.

# Create `/notes/:id` and `/notes/:id/edit` pages

Create Edit.vue file in src/pages/ directory Extend Create.vue component to edit a note.
Register /notes/:id/pages route with Edit.vue file Configure route to map params to props.
Create View.vue file in src/pages/ directory
Register /notes/:id route with Edit.vue file Configure route to map params to props.

# Use local storage to persist notes

Subscribe to store mutations
Store state to localStorage after CREATE or UPDATE mutation
Load state from localStorage if available

# Deployment

Install surge
```
npm add -D surge
```
Create an icon for the application Use android icon generator tool: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
Generate favicon and application meta Use favicon generator tool: https://realfavicongenerator.net
Create public/ directory Copy the favicon and meta files Create index.html file
Add application name in public/manifest.json and public/index.html

Add following npm scripts to package.json

"build": "vue build src/index.js",
"prebuild": "npm run test",
"postbuild": "cp dist/index.html dist/200.html",
"deploy": "surge -p ./dist",
"predeploy": "npm run build"

Add CNAME file to public directory
Execute npm run deploy

# Create `/login` page

Add Login.vue file in src/pages/ directory
Register /login route with Login.vue
Add <Trash> icon component Create Trash.vue file in src/components/Icon/ directory
Install firebase & vuexfire
```
npm add firebase vuexfire
```
Configure firebase

# Add firebase auth and database support

Add router navigation guard to redirect unauthenticated user to /login page
Use vuexfire to integrate firebase database with vuex
Initialize firebase and vuex state when <App> is created

znck/begin-again.md

# Initial Commit

# Create new npm project

# Create "Hello World" Application

# Run the application in development mode

# Configure testing environment

# Create <Editor> Component

# Create <Markdown> Component

# Add support for emojis in <Markdown> component

# Create Icon components

# Create <MarkdownEditor> Component

# Add support for client side routing

# Create /notes/create page

# Create /notes page

# Add support for centralized state management

# Create <Note> Component

# Add note create and update functions

# Link /notes/create page with vuex store

# Create /notes/:id and /notes/:id/edit pages

# Use local storage to persist notes

# Deployment

# Create /login page

# Add firebase auth and database support

# Create `<Editor>` Component

# Create `<Markdown>` Component

# Add support for emojis in `<Markdown>` component

# Create `<MarkdownEditor>` Component

# Create `/notes/create` page

# Create `/notes` page

# Create `<Note>` Component

# Link `/notes/create` page with vuex store

# Create `/notes/:id` and `/notes/:id/edit` pages

# Create `/login` page