Skip to content

Instantly share code, notes, and snippets.

@znck

znck/begin-again.md

Last active January 29, 2019 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save znck/be623d2a93a324e00d23f50e21a36afd to your computer and use it in GitHub Desktop.
Save znck/be623d2a93a324e00d23f50e21a36afd to your computer and use it in GitHub Desktop.
Download ZIP
VueBLR - Begin Again Workshop
Raw
begin-again.md

# 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment