+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.
On Sun, Nov 26, 2017 at 6:21 PM, Massimo Di Pierro <
massimo.dipie...@gmail.com> wrote:
> 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.
