Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to Feathers 3.9.0 and Quasar 1.0.0-beta.7 #15

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 7 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Each framework provides its own CLI so that starting a project is easy, with a c
Quasar for the frontend:
```bash
$ npm install -g quasar-cli
$ quasar init quasar-feathers
$ quasar create quasar-feathers
$ cd quasar-feathers
$ npm install
// Will launch the frontend server in dev mode on 8080
Expand Down Expand Up @@ -91,19 +91,6 @@ create src/services/messages/messages.hooks.js
create test/services/messages.test.js
```

To make the Quasar app correctly contacting the backend you have to configure an API proxy in your frontend **config/index.js**:
```javascript
...
dev: {
proxyTable: {
'/api': {
target: 'http://localhost:3030',
changeOrigin: true
}
}
...
```

## API glue

Feathers provides you with a thin layer on the client-side to make API authentication and calls so simple. We create a new **src/api.js** file in the frontend to handle the glue with the API:
Expand Down Expand Up @@ -150,7 +137,7 @@ users.on('created', user => {
## Main layout

From a end-user perspective the application will be simple:
- a menu toolbar including (**src/layouts/default.vue** component)
- a menu toolbar including (**src/layouts/MyLayout.vue** component)
- a sign in/register entry when not connected
- home/chat entries and a signout menu to logout when connected
- a sidebar menu recalling the home/chat entries and a about section
Expand All @@ -165,7 +152,7 @@ From a end-user perspective the application will be simple:
$ quasar new page Chat
```

We update the layout of the **src/layouts/default.vue** template to include a [Toolbar with some entries](http://quasar-framework.org/components/toolbar.html), a logout [button](http://quasar-framework.org/components/button.html), a [Sidebar menu](http://quasar-framework.org/components/layout.html#Navigation-from-drawer-panels) and an [entry point for other components](https://router.vuejs.org/en/api/router-view.html):
We update the layout of the **src/layouts/MyLayout.vue** template to include a [Toolbar with some entries](http://quasar-framework.org/components/toolbar.html), a logout [button](http://quasar-framework.org/components/button.html), a [Sidebar menu](http://quasar-framework.org/components/layout.html#Navigation-from-drawer-panels) and an [entry point for other components](https://router.vuejs.org/en/api/router-view.html):
```html
<q-layout>
<q-layout-header>
Expand Down Expand Up @@ -432,7 +419,7 @@ const auth = {
export default auth
```

On the frontend we setup the **src/components/SignIn.vue** component as a [basic dialog](http://quasar-framework.org/components/dialog.html) with e-mail/password inputs:
On the frontend we setup the **src/pages/SignIn.vue** component as a [basic dialog](http://quasar-framework.org/components/dialog.html) with e-mail/password inputs:
```javascript
<template>
<q-page class="flex flex-center">
Expand Down Expand Up @@ -528,7 +515,7 @@ We manage registration as well as login, depending on the route used to reach th

The component's ```login``` and ```register``` method simply delegate to the login/register methods of the ```auth``` module that we've created before.

Once connected, the user should land on the home page then be able to navigate in the app, so that in the main layout we have to track the login state as the currently connected user in **$data.user** (null if not logged in). We will also manage logout from the profile menu entry and restoring the previous session if any by trying to authenticate on mounting **src/layouts/default.vue**:
Once connected, the user should land on the home page then be able to navigate in the app, so that in the main layout we have to track the login state as the currently connected user in **$data.user** (null if not logged in). We will also manage logout from the profile menu entry and restoring the previous session if any by trying to authenticate on mounting **src/layouts/MyLayout.vue**:
```javascript
import auth from 'src/auth'

Expand Down Expand Up @@ -745,7 +732,7 @@ module.exports = {

### Frontend

Helpfully Quasar comes with a built-in [chat component](http://quasar-framework.org/components/chat.html) that we will use to display our messages. We will also use the built-in [list](http://quasar-framework.org/components/lists-and-list-items.html) to list available people. Last, we will use a simple [text input](http://quasar-framework.org/components/input.html#Labeling) to send messages in the chat room. Inside the component these data are respectively stored in **$data.messages**, **$data.users**, **$data.message**. The final template of the **src/components/Chat.vue** component is thus the following:
Helpfully Quasar comes with a built-in [chat component](http://quasar-framework.org/components/chat.html) that we will use to display our messages. We will also use the built-in [list](http://quasar-framework.org/components/lists-and-list-items.html) to list available people. Last, we will use a simple [text input](http://quasar-framework.org/components/input.html#Labeling) to send messages in the chat room. Inside the component these data are respectively stored in **$data.messages**, **$data.users**, **$data.message**. The final template of the **src/pages/Chat.vue** component is thus the following:
```html
<q-page class="flex flex-center">
<div class="row full-width">
Expand Down Expand Up @@ -784,7 +771,7 @@ Helpfully Quasar comes with a built-in [chat component](http://quasar-framework.

As you can see we rely on the Quasar [positioning classes](http://quasar-framework.org/components/positioning.html) to make the message input be fixed at the bottom of the page.

Retrieving messages/users on mount and in real-time is a piece of cake in **src/components/Chat.vue**:
Retrieving messages/users on mount and in real-time is a piece of cake in **src/pages/Chat.vue**:
```javascript
...
mounted () {
Expand Down
8 changes: 0 additions & 8 deletions quasar-feathers/.babelrc

This file was deleted.

43 changes: 25 additions & 18 deletions quasar-feathers/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,54 @@
module.exports = {
root: true,

parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},

env: {
browser: true
},

extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
'@vue/standard'
],

// required to lint *.vue files
plugins: [
'vue'
],

globals: {
'ga': true, // Google Analytics
'cordova': true,
'__statics': true
},

// add your custom rules here
'rules': {
rules: {
// allow async-await
'generator-star-spacing': 'off',

// allow paren-less arrow functions
'arrow-parens': 0,
'one-var': 0,

'import/first': 0,
'import/named': 2,
'import/namespace': 2,
'import/default': 2,
'import/export': 2,
'import/extensions': 0,
'import/no-unresolved': 0,
'import/no-extraneous-dependencies': 0,

// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
'arrow-parens': 'off',
'one-var': 'off',
'prefer-promise-reject-errors': 'off',

'import/first': 'off',
'import/named': 'error',
'import/namespace': 'error',
'import/default': 'error',
'import/export': 'error',
'import/extensions': 'off',
'import/no-unresolved': 'off',
'import/no-extraneous-dependencies': 'off',

// allow console.log during development only
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
22 changes: 17 additions & 5 deletions quasar-feathers/.gitignore
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
.quasar
.DS_Store
.thumbs.db
node_modules/
dist/
node_modules
/dist
/src-cordova/node_modules
/src-cordova/platforms
/src-cordova/plugins
/src-cordova/www
npm-debug.log*
cordova/platforms
cordova/plugins
.quasar
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
18 changes: 1 addition & 17 deletions quasar-feathers/README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,3 @@
# Quasar App

> A Quasar project

## Build Setup

``` bash
# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ quasar dev

# build for production with minification
$ quasar build

# lint code
$ quasar lint
```
> WIP
5 changes: 0 additions & 5 deletions quasar-feathers/api/.babelrc

This file was deleted.

3 changes: 0 additions & 3 deletions quasar-feathers/api/.eslintignore

This file was deleted.

17 changes: 0 additions & 17 deletions quasar-feathers/api/.eslintrc.js

This file was deleted.

29 changes: 29 additions & 0 deletions quasar-feathers/api/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"env": {
"es6": true,
"node": true,
"mocha": true
},
"parserOptions": {
"ecmaVersion": 2018
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
117 changes: 112 additions & 5 deletions quasar-feathers/api/.gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,112 @@
.DS_Store
node_modules/
dist/
npm-debug.log
npm-debug.log.*
# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# Commenting this out is preferred by some people, see
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
node_modules

# Users Environment Variables
.lock-wscript

# IDEs and editors (shamelessly copied from @angular/cli's .gitignore)
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

### Linux ###
*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*

### OSX ###
*.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon


# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

### Windows ###
# Windows thumbnail cache files
Thumbs.db
ehthumbs.db
ehthumbs_vista.db

# Folder config file
Desktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msm
*.msp

# Windows shortcuts
*.lnk

# Others
lib/
data/
6 changes: 0 additions & 6 deletions quasar-feathers/api/build/script.clean.js

This file was deleted.

Loading