Web2Py + VueJS SPA (Webpack)

[Carlos A. Armenta Castro]

I have using Web2Py for too many years for commercial websites and for Intranets in México, I want to say that Web2Py is an AMAZING Framework!!! 

For my new project I need to use an SPA VueJs + Webpack for the FrontEnd  ( http://quasar-framework.org/ ) and a Web2Py as my BackEnd API Server. 

I'm curious about to integrate his two web frameworks using web2py routes to serve this two apps in the same port but different URL.

Example:

http://127.0.1.1/welcome/api ---> My Web2py API Controller

http://127.0.1.1/welcome       ---> My VueJS APP with webpack  ( http://quasar-framework.org/ ) <-- Pointing to index.html in dist/  and permit to use all the static files deposited in the same path dist/*

VueJS + Webpack APP Structure

├── dist/                      # Compiled APP (Serve this files as the static SPA)
│   └── index.html 
│   ├── fonts/             
│   │   └── ...
│   ├── static/             
│   │   └── ...
│   ├── js/             
│   │   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
...

Actually I am doing this work in my NginX Server but I Will be happy if I can do the same thing easily using pure web2py!!!! 

Why using the same port?  Because the CORS issues, this is the best and easy way to deal with CORS. I know I can use sub-domains in the same port, I know I can use ALLOW ORIGIN headers in W2P side but that are not options for me in this case.

NginX config working:

location / {
                index index.html index.htm;
                root /home/www-data/vue/applications/simott;
                try_files $uri $uri/ /index.html;
        }

        location /api {
            uwsgi_pass      unix:///tmp/web2py.socket;
            include         uwsgi_params;
            uwsgi_param     UWSGI_SCHEME $scheme;
            uwsgi_param     SERVER_SOFTWARE nginx/$nginx_version;

       }

Any recommendations? Thanks in advance!

[Massimo Di Pierro]

This is fantastic. Thank you Carlos,

please email me personally about you work. I think this is the path to the future of web2py.

[José Luis Redrejo]

Hi Carlos

I would recommend you to use this webpack helper:

https://github.com/Plortinus/vue-multiple-pages

Doing "vue init Plortinus/vue-multiple-pages new-project" you get the structure to work, just add the div for app to the class and import the page js per each page.

Also, in webpack.config.babel.js configuration file ,  if you add

  devServer: {

    host: '127.0.0.1',

    port: 8001,

    historyApiFallback: false,

    noInfo: true,

    proxy: {

      '/yourapp/api/*': {

        target: 'http://127.0.0.1:8080',

        secure: false

        // changeOrigin: true,

        // pathRewrite: { '^/api': '' }

      }

    },

  },

You can start web2py server, then webpack dev server and it will do queries to web2py without any cors problem.

i.e 

http://localhost:8001/api/whatever will automatically be fetched from

http://localhost:8080/yourapp/api/whatever

That's how I set it up for web2py to be the backend, and webpack dev server to run the frontend.

Hope it helps

José L.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[José Luis Redrejo]

Carlos, by the way, if you are not in a hurry I can prepare a proof of concept this weekend. I just can tell it really works because I am using it in a system in production.

Of course, that's the develop setup, once develop is done in production we use nginx-uwsgi only, but in that case there's no cors problem as everything runs in the same server.

The only thing I miss in web2py (waving Massimo ;) ) is having something like http://pyramid-webpack.readthedocs.io/en/latest/ 

It would allow us to write in the view  controller/function.html something like

<link rel="stylesheet" href="{{=URL('static',webpack('controller/function.css'))}}"/>

<script src="{{=URL('static',webpack('controller/function.js'))}}"></script>

It would fetch the built files using the dist/webpack-manifest.json automatically instead of having to write them manually. Now if I use js or css versioning I have to change the routes in the view whenever I execute webpack

Regards

José L.

[黄祥]

i'm interest too, could you give some simple example (crud) to learn how it works?

thanks and best regards,

stifan

[José Luis Redrejo]

I will do it this weekend, by the way crud is not simple at all. In fact it's one of the most complex things ;)

--

[Carlos A. Armenta Castro]

Hi José,

I'm not in a hurry, but I will appreciate so much your help.

Thank you!

P.S. Your recipe with the Webpack proxyTable is working like a charm in my dev server. 😅

lso, in webpack.config.babel.js configuration file ,  if you add

  devServer: {

    host: '127.0.0.1',

    port: 8001,

    historyApiFallback: false,

    noInfo: true,

    proxy: {

      '/yourapp/api/*': {

        target: 'http://127.0.0.1:8080',

        secure: false

        // changeOrigin: true,

        // pathRewrite: { '^/api': '' }

      }

    },

  },

You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/pzyyNKajy0w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+unsubscribe@googlegroups.com.

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

--

Ing. Carlos Alberto Armenta Castro
Hermosillo, Sonora, MX.

[Val K]

I believe that strongest web2py's feature is that it allows to do the stuff  by one developer, as if it would be done by several qualified one's. You are going to make web2py's fans to code in pure JS to develop frontend, right? I think it is not the future that's expected. My dream is web2py integrated with rapydscript/rapydscript-ng + rapydml + lib of vue-components(written on rapydscript) -  it would be really fantastic.

[Carlos A. Armenta Castro]

Hi Val K,

I believe the future of Web2Py would be: One back-end and so many flavors for the Front-End as Flask, Piramyds and Laravel frameworks are doing. My personal and particular experience using transpilers like rapydscript-ng or coffescript for a medium size project was very bad (maybe using TypeScript would be a good idea because of their adoption!). At the beginning with rapydscript  all was easy but mantaint and modify the code was hard for me (big changes), at the end I re-wrote all my front-end code in pure Javascript using ES6, Vue and Webpack. Actually ES6 is easy, and the Linter can prevent us of so many errors.

https://github.com/eddyekofo94/pyramidVue

https://github.com/gtalarico/flask-vuejs-template

https://github.com/longtranista/django-vue-webpack

https://github.com/dolbex/webpack-laravel

https://github.com/Koroeskohr/rails-vuejs-webpack-boilerplate

[Richard Vézina]

For me, having a good supported (backward) path to pick ractive/vue/angular (to big for my need) would be nice... Massimo's has made w3 if I recall, but I rapidly feel  lost with ractive.js... I try vue.js and find it easier to pick it up. But there is a lot of boiler plate to implement to levrage vue.js with web2py... You have to step back decide if you are going to properly implement rest in web2py for server side processing and then you have all the form and validation to handle... You can use some vue.js lib for validation, but you have to evaluate them find out if they will be maintain over time before tye you app to them. 

My dream would be that we still use web2py to define field constain and that they translate into the front-end while having flexibility to tweak them client site with vue.js that was the point of w3...

As Val mention keep the strengh of web2py single dev be able to be as productive as a little team is what would be the most awesome... But with all the possible way to implement things with vue.js or other client side framework, I doubt we could succeed in adoption of this chimera that would make that possible. It would really depend on the burden over extensibility impose by the web2py/vue implementation framework...

Richard

--

[Massimo Di Pierro]

It seems that using the cli is becoming standard these days but I still like the original simplicity of being able to write js without need for nodejs.

I tend to program in this way:

#... in index.html

<div id="app">

   <div v-if="page='mypage1">

      <mypage></mypage>

      <button v-on:click="goto('mypage2')">next</button>

   </div>

   <div v-if="page='mypage2">

      <mypage></mypage>

      <button v-on:click="goto('mypage3')">next</button>

   </div>

   <div v-if="page='mypage3">

      <mypage></mypage>

      <button v-on:click="goto('mypage1')">start again</button>

   </div>

</div>

<script src="js/vue.min.js"></script>

<script src="js/axios.min.js"></script>

<script src="js/main.js"></script>

# in js/main.js

var app = {};

// make a component for each page or each reusable widget with a lazily loaded html

Vue.component('mypage', function (resolve, reject) {

        axios.get('components/vue.mypage.html').then(function(res) { resolve(common_forms(res.data)); });

    });

app.vue = new Vue({el:'#app data:{page:'mypage1'}, methods:{goto:function(page){app.vue.page=page;}}, filters:{}, components: {}});

# then I define the html for each component in its own lazily-loaded html file, for example

# in components/vue.mypage.html

<div>

   I am the template for the mypage component.

</div>

[José Luis Redrejo]

Massimo, I am sure most of the people in this group agree with you, having the same preference. Coming from the python world we feel more comfortable using that kind of js interaction.

I am one of them, and I chose web2py for my personal work some  years ago because of its simplicity against other frameworks complexity.

However, working as you mentioned force you to miss most of the rich environment available using node modules.

Unfortunately, nowadays to build a modern web site you need to be fluent in 5 "languages" at least (python, JavaScript, html, css & sql) plus some frameworks (web2py, bootstrap, vue/react, not to mention other things like sqlalchemy in some cases). I agree it's not comfortable at all, but currently I see only two solutions for it:

1. If you can work exclusively for chrome/firefox you will be able to work with node-modules in the browser, without the cli , using an elegant solution as https://medium.com/@oleg.agapov/basic-single-page-application-using-vue-js-and-firebase-part-1-9e4c0c11a228

2. In the medium term we might have webcomponents

3. Paid solutions like Anvil, https://anvil.works/,  allowing you to do everything in Python

However, now, needing to support old versions of Firefox and Chrome, or IE, Safari, Edge, etc. I don't see alternatives to the nightmare of webpack and node cli if you want to do a modern application.

I think the approach you mention in your email would be similar to be copying python files inside our application directories instead of using pip install to install complete packages. So, my opinion is that we should work on having a polished approach for future versions of web2py, similar to what PHP Laravel community did with vue.

José L.

[JorgeH]

I second this,

</div>

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

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

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/pzyyNKajy0w/unsubscribe.

To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.

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

--

Ing. Carlos Alberto Armenta Castro

Hermosillo, Sonora, MX.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.

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

[Richard Vézina]

Anvil seems pretty nice... But 49$/month is quite expensive... It professionnal tool and not open source I guess... I am not in the bangwagon of the UI drag and drop kind of thing as such kind of product (which work well in the begining) often ends up difficult to make working as simply in the long run with all the complexity that consumer might want. It seems to handle both kind of scenario, I mean build UI from code or build basic code from UI design. This is surely something difficult to achieve with open source, I mean the UI drag/drop stuff... Web2py excel at the second part though. But it get old and client side paradigm occur...

So, I guess that we are going to need to know the 2 languages python and javascript... Then all the various framework with all the particularity and pitfalls/limitations.

:)

Richard

[Massimo Di Pierro]

I agree. I wish there was a way (and may be there is but I do not know) to to what webpack does from inside the browser of the developer so that the developer does not have to install node. If that were possible we could distribute vue components with web2py and not worry about users installing the node stack. 

Massimo

[José Luis Redrejo]

I have begun to work on an easy setup, integrated with the way web2py works. I have little free time to work on it, so it's not finished yet, but I hope to have it ready soon.

It's based on manual implementations I have done in production applications, but done in a more general and easy to use way.

I will share with you the git repo as soon as I finish it, just in case anybody wants to use or improve it.

Regards.

[joseph simpson]

Yes, please ...

Looking forward to this combination ..

Joe Simpson

“Reasonable people adapt themselves to the world. 

Unreasonable people attempt to adapt the world to themselves. 

All progress, therefore, depends on unreasonable people.”

George Bernard Shaw

[Milton A]

+1

It seems that using the cli is becoming standard these days but I still like the original simplicity of being able to write js without need for nodejs.

[tesser...@gmail.com]

Hi Massimo, I thought you might be interested in this: https://bootstrap-vue.js.org/

Quite a new project, MIT license, currently under very active development mainly by a Canadian and an Iranian.

[Carlos Costa]

This bootstrap-vue.js transparently integrated with web2py  backend woud be a dream.

IMO this would be half the web3py.

2017-12-04 11:42 GMT-02:00 <tesser...@gmail.com>:

Hi Massimo, I thought you might be interested in this: https://bootstrap-vue.js.org/

Quite a new project, MIT license, currently under very active development mainly by a Canadian and an Iranian.

--

Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Carlos J. Costa

Cientista da Computação  | BS Computer Science
Esp. Gestão em Telecom   | PgC Telecom Mangement

<º))><

[pbreit]

How would the "Browser" install method work? Just a matter of adding those lines to layout.html? Possible to implement this without all the build tools?

[Milton A]

All the build tools are the hell. Not for a fullstack js programmer, but for us we use a better programming language for our tasks on server (better programming language is relative for what you need) but we need to use js on client because we can not use python.

Those new build tools come to solve problems we did not have before than. =-) So, let's try to keep web2py as simple as we can or we will lose to others more complex frameworks our best advantages. The simplicity and high productive. 

On Wed, Dec 6, 2017 at 6:55 PM, pbreit <pbreit...@gmail.com> wrote:

How would the "Browser" install method work? Just a matter of adding those lines to layout.html? Possible to implement this without all the build tools?

--

[Richard Vézina]

That why I think we should keep sqlhtml a live so we can choose to create forms/tags from server side when ever it makes sens... I use web2py HELPERS all the time as I find it cleaner to write than HTML despite it slower... Though, at some point server side is painful (for complex form or piece of app you want SPA)... So agree on a JS framework and a way of doing thing with it along with web2py/web3py is what is crually missing right now to me... We (I) need to have a basic path on how to craft our client side app part... Should we build restful api before use any client side library... A sane API default for rest would be interresting as we shouldn't reinvent the wheel on our side each time... I see more and more in Django app with client side app and server side rest app (Taiga being a good example : https://taiga.io/)... We need to follow what the industry is doing.

Richard

[pbreit]

Wouldn't this be just a matter of supplying a "welcome-spa" welcome app/starter with REST "on" and Vue-based (or whatever) views? This doesn't require any changes to core Web2py, does it?

[António Ramos]

I like very much the framework http://deployd.com/

It produces and updates automatically according to our data model a js file that is loaded to the user frontend and permits to deal with the datamodel directly from the browser...

This way there is no need to REST

http://docs.deployd.com/docs/collections/accessing-collections.html

2017-12-07 22:06 GMT+00:00 pbreit <pbreit...@gmail.com>:

Wouldn't this be just a matter of supplying a "welcome-spa" welcome app/starter with REST "on" and Vue-based (or whatever) views? This doesn't require any changes to core Web2py, does it?

--

[Dave S]

On Friday, December 8, 2017 at 11:24:25 AM UTC-8, Ramos wrote:

I like very much the framework http://deployd.com/

It produces and updates automatically according to our data model a js file that is loaded to the user frontend and permits to deal with the datamodel directly from the browser...

This way there is no need to REST

http://docs.deployd.com/docs/collections/accessing-collections.html

Well, sometimes you need to provide a REST interface for non-browser requests (management tools, Grafana, etc).

Also, does this work with servers that aren't node.js?

/dps

2017-12-07 22:06 GMT+00:00 pbreit <pbreit...@gmail.com>:

Wouldn't this be just a matter of supplying a "welcome-spa" welcome app/starter with REST "on" and Vue-based (or whatever) views? This doesn't require any changes to core Web2py, does it?

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.

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