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-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. > > 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/topic/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.
