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.
2017-11-28 1:06 GMT+01:00 Massimo Di Pierro <massimo.dipie...@gmail.com>: > 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 > > > On Monday, 27 November 2017 14:13:27 UTC-6, JosΓ© L. wrote: >> >> 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-applicatio >> n-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. >> >> 2017-11-26 21:21 GMT+01:00 Massimo Di Pierro <massimo.dipie...@gmail.com> >> : >> >>> 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> >>> >>> >>> >>> On Wednesday, 15 November 2017 09:33:28 UTC-6, Carlos A. Armenta Castro >>> wrote: >>> >>>> 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': '' } >>>>> } >>>>> }, >>>>> }, >>>>> >>>> >>>> On Tue, Nov 14, 2017 at 12:58 PM, JosΓ© Luis Redrejo <jredr...@gmail.com >>>> > wrote: >>>> >>>>> 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. >>>>> >>>>> 2017-11-14 20:37 GMT+01:00 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. >>>>>> >>>>>> 2017-11-14 17:48 GMT+01:00 Carlos A. Armenta Castro < >>>>>> carlos.armen...@gmail.com>: >>>>>> >>>>>>> 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! >>>>>>> >>>>>>> -- >>>>>>> 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+unsubscr...@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/to >>>>> pic/web2py/pzyyNKajy0w/unsubscribe. >>>>> To unsubscribe from this group and all its topics, send an email to >>>>> web2py+unsubscr...@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+unsubscr...@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 the Google Groups > "web2py-users" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to web2py+unsubscr...@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 the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/d/optout.
