Web2py with Vue.js

[Roberto Perdomo]

Hello folks,

I have started a serious proyect today to try integrate Web2py with
Vue.js and I have a public repository if somebody wants to help with
this great idea.

The main idea is have a SPA design with Vue running with Web2py at the
background

For now I only have a initial design (using vuetify), some views for
login, and webpack integrated.

Needs make the JWT Auth, I hope get some help at this point or do
myself this week.

The repository link is https://github.com/robertop23/web2py_vuejs_vuetify

Personally I think that this can be great for all.

My best regards,

Roberto Perdomo

[Massimo DiPierro]

I agree. Everybody wants vue today. Including me.

--
-- mail from:GoogleGroups "web2py-developers" mailing list
make speech: web2py-developers@googlegroups.com
unsubscribe: web2py-developers+unsubscribe@googlegroups.com
details    : http://groups.google.com/group/web2py-developers
the project: http://code.google.com/p/web2py/
official    : http://www.web2py.com/
---
You received this message because you are subscribed to the Google Groups "web2py-developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py-developers+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Roberto Perdomo]

Login and logout now are working using jwt :-)

On 26 February 2018 at 23:21, Massimo DiPierro

<massimo....@gmail.com> wrote:
> I agree. Everybody wants vue today. Including me.
>
> On Mon, Feb 26, 2018 at 7:25 PM, Roberto Perdomo <rober...@gmail.com>
> wrote:
>>
>> Hello folks,
>>
>> I have started a serious proyect today to try integrate Web2py with
>> Vue.js and I have a public repository if somebody wants to help with
>> this great idea.
>>
>> The main idea is have a SPA design with Vue running with Web2py at the
>> background
>>
>> For now I only have a initial design (using vuetify), some views for
>> login, and webpack integrated.
>>
>> Needs make the JWT Auth, I hope get some help at this point or do
>> myself this week.
>>
>> The repository link is https://github.com/robertop23/web2py_vuejs_vuetify
>>
>> Personally I think that this can be great for all.
>>
>> My best regards,
>>
>> Roberto Perdomo
>>
>> --
>> -- mail from:GoogleGroups "web2py-developers" mailing list

>> make speech: web2py-d...@googlegroups.com
>> unsubscribe: web2py-develop...@googlegroups.com

>> details : http://groups.google.com/group/web2py-developers
>> the project: http://code.google.com/p/web2py/
>> official : http://www.web2py.com/
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "web2py-developers" group.
>> To unsubscribe from this group and stop receiving emails from it, send an

>> email to web2py-develop...@googlegroups.com.

>> For more options, visit https://groups.google.com/d/optout.
>
>

> --
> -- mail from:GoogleGroups "web2py-developers" mailing list

> make speech: web2py-d...@googlegroups.com
> unsubscribe: web2py-develop...@googlegroups.com

> details : http://groups.google.com/group/web2py-developers
> the project: http://code.google.com/p/web2py/
> official : http://www.web2py.com/
> ---
> You received this message because you are subscribed to the Google Groups
> "web2py-developers" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to web2py-develop...@googlegroups.com.

[黄祥]

interest in learning of how web2py and vue js work, when tested roberto's repo is not work

step to reproduce:

cd ~/web2py/applications

git clone https://github.com/robertop23/web2py_vuejs_vuetify

cd web2py_vuejs_vuetify

mv private/appconfig_example.ini private/appconfig.ini

npm install

npm run watch

another terminal to start web2py

python ~/web2py/web2py.py --nogui --no-banner -a a -i 0.0.0.0 -p 8000

checked in private/appconfig.ini there is connect to mysql, want to start from simple first use sqlite, yet the sqlite and mysql both return the same error traceback

uri       = sqlite://storage.sqlite

tested the url http://localhost:8000/web2py_vuejs_vuetify/default/index

error traceback

Traceback (most recent call last):

  File "/Users/sugizo/web2py/gluon/restricted.py", line 219, in restricted

    exec(ccode, environment)

  File "/Users/sugizo/web2py/applications/web2py_vuejs_vuetify/views/default/index.html", line 14, in <module>

    {% import urllib2 %}

  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib2.py", line 154, in urlopen

    return opener.open(url, data, timeout)

  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib2.py", line 437, in open

    response = meth(req, response)

  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib2.py", line 550, in http_response

    'http', request, response, code, msg, hdrs)

  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib2.py", line 475, in error

    return self._call_chain(*args)

  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib2.py", line 409, in _call_chain

    result = func(*args)

  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/urllib2.py", line 558, in http_error_default

    raise HTTPError(req.get_full_url(), code, msg, hdrs, fp)

HTTPError: HTTP Error 404: NOT FOUND

any idea?

thx n best regards,

stifan

[Richard Vézina]

Nice to hear that... Will have try ASAP.

Richard

[tim.n...@conted.ox.ac.uk]

Good to hear.  I've been starting to build Vue widgets for web2py forms, so seeing a SPA would be neat.

[Roberto Perdomo]

I don't make the url generic, you need edit your base routes from the
root routes.py, I have added the example on the repository. Please let
me know if work for you

[黄祥]

already have routes.py that contain:

routers = dict(
    BASE=dict(
        default_application='web2py_vuejs_vuetify',
    ),
    web2py_vuejs_vuetify=dict(
        default_function='index',
    )
)

but still have the same error

[Roberto Perdomo]

Fixed

[José Luis Redrejo]

Hello
Some months ago I also begun to do a scalfolding application using
vue, extracting the common patterns of some applications I have done
in production.
It's https://github.com/jredrejo/web2pyvue
Main part is https://github.com/jredrejo/web2pyvue/blob/master/models/webpack_utils.py
that, together with the last lines of
https://github.com/jredrejo/web2pyvue/blob/master/views/layout.html ,
makes the view load automatically the Vue application for each
controller/function.
It's not a SPA, it's just a way to load Vue applications for the
functions if they are created. It's not mandatory, so some views can
be standard html pages and others can load automagically the vue app.

Take a look at it, it could be useful for the final implementation.
This weekend a new version of webpack has been released. This version
will simplify a lot the webpack configuration, so I could change it to
be almost zero-config.
I haven't finished the scalfolding example yet due to my lack of time,
but I am willing to help if you want.

Regards
José L.

2018-02-27 4:21 GMT+01:00 Massimo DiPierro <massimo....@gmail.com>:
> I agree. Everybody wants vue today. Including me.
>
> On Mon, Feb 26, 2018 at 7:25 PM, Roberto Perdomo <rober...@gmail.com>
> wrote:
>>
>> Hello folks,
>>
>> I have started a serious proyect today to try integrate Web2py with
>> Vue.js and I have a public repository if somebody wants to help with
>> this great idea.
>>
>> The main idea is have a SPA design with Vue running with Web2py at the
>> background
>>
>> For now I only have a initial design (using vuetify), some views for
>> login, and webpack integrated.
>>
>> Needs make the JWT Auth, I hope get some help at this point or do
>> myself this week.
>>
>> The repository link is https://github.com/robertop23/web2py_vuejs_vuetify
>>
>> Personally I think that this can be great for all.
>>
>> My best regards,
>>
>> Roberto Perdomo
>>
>> --
>> -- mail from:GoogleGroups "web2py-developers" mailing list

>> make speech: web2py-d...@googlegroups.com
>> unsubscribe: web2py-develop...@googlegroups.com

>> details : http://groups.google.com/group/web2py-developers
>> the project: http://code.google.com/p/web2py/
>> official : http://www.web2py.com/
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "web2py-developers" group.
>> To unsubscribe from this group and stop receiving emails from it, send an

>> email to web2py-develop...@googlegroups.com.

>> For more options, visit https://groups.google.com/d/optout.
>
>

> --
> -- mail from:GoogleGroups "web2py-developers" mailing list

> make speech: web2py-d...@googlegroups.com
> unsubscribe: web2py-develop...@googlegroups.com

> details : http://groups.google.com/group/web2py-developers
> the project: http://code.google.com/p/web2py/
> official : http://www.web2py.com/
> ---
> You received this message because you are subscribed to the Google Groups
> "web2py-developers" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to web2py-develop...@googlegroups.com.

[Richard Vézina]

Could we merge all these approaches in a single on steroid scaffolding how to app?

Richard

>> make speech: web2py-developers@googlegroups.com
>> unsubscribe: web2py-developers+unsubscribe@googlegroups.com

>> details    : http://groups.google.com/group/web2py-developers
>> the project: http://code.google.com/p/web2py/
>> official    : http://www.web2py.com/
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "web2py-developers" group.
>> To unsubscribe from this group and stop receiving emails from it, send an

>> email to web2py-developers+unsubscribe@googlegroups.com.

>> For more options, visit https://groups.google.com/d/optout.
>
>
> --
> -- mail from:GoogleGroups "web2py-developers" mailing list

> make speech: web2py-developers@googlegroups.com
> unsubscribe: web2py-developers+unsubscribe@googlegroups.com

> details : http://groups.google.com/group/web2py-developers
> the project: http://code.google.com/p/web2py/
> official : http://www.web2py.com/
> ---
> You received this message because you are subscribed to the Google Groups
> "web2py-developers" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to web2py-developers+unsubscribe@googlegroups.com.

> For more options, visit https://groups.google.com/d/optout.

--
-- mail from:GoogleGroups "web2py-developers" mailing list

make speech: web2py-developers@googlegroups.com
unsubscribe: web2py-developers+unsubscribe@googlegroups.com

details    : http://groups.google.com/group/web2py-developers
the project: http://code.google.com/p/web2py/
official    : http://www.web2py.com/
---
You received this message because you are subscribed to the Google Groups "web2py-developers" group.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py-developers+unsubscribe@googlegroups.com.

[Massimo DiPierro]

I would not require the router but I would do something like this in the JS

var base = window.location.href.split('/').slice(0,4).join('/')+'/';

and use base to built all the URLs

[Roberto Perdomo]

Thanks Massimo, yesterday I changed all the vue url's to make it
generic using something like this:

axios.get('/' + window.config.appName + '/api/user')

But your suggestion is better, thanks!

On 28 February 2018 at 11:34, Massimo DiPierro

[Carlos Cesar Caballero Díaz]

+1

El 28/02/18 a las 10:00, Richard Vézina escribió:

make speech: web2py-d...@googlegroups.com
unsubscribe: web2py-develop...@googlegroups.com

details : http://groups.google.com/group/web2py-developers
the project: http://code.google.com/p/web2py/
official : http://www.web2py.com/
---
You received this message because you are subscribed to the Google Groups "web2py-developers" group.

To unsubscribe from this group and stop receiving emails from it, send an email to web2py-develop...@googlegroups.com.

[黄祥]

tried jose's repo but not work

step to reproduce :

cd path_to_web2py_applications

git clone https://github.com/jredrejo/web2pyvue 

cp welcome/private/appconfig.ini web2pyvue/private/

cd web2pyvue/static/

npm install

error traceback :

Traceback (most recent call last):

  File "/Users/sugizo/web2py/gluon/restricted.py", line 219, in restricted

    exec(ccode, environment)

  File "/Users/sugizo/web2py/applications/web2pyvue/views/default/index.html", line 14, in <module>

    <li>{{=XML(T('You visited the url %s', A(request.env.path_info,_href=request.env.path_info)))}}</li>

  File "/Users/sugizo/web2py/applications/web2pyvue/models/webpack_utils.py", line 34, in WEBPACK

    manifest = load_json(join(application_folder, manifest_file))

  File "/Users/sugizo/web2py/applications/web2pyvue/models/webpack_utils.py", line 18, in load_json

    with open(f) as fp:

IOError: [Errno 2] No such file or directory: '/Users/sugizo/web2py/applications/web2pyvue/static/dist/webpack-manifest.json'

seems don't have webpack-manifest.json file on static/dist folder

best regards,

stifan

[José Luis Redrejo]

Hi Stifan
if you check the package.json file, for this to work
webpack-manifest-plugin must be installed.
Then you need to do "npm run build" to generate the webpack-manifest.json.

Regards

[黄祥]

a, sorry my bad, didn't know about that, it run well now with the step :

cd path_to_web2py_applications

git clone https://github.com/jredrejo/web2pyvue

cp -r welcome/private web2pyvue/

cd web2pyvue/static/

npm install

npm run build

best regards,

stifan