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 <[email protected]>
> 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 <
>>> [email protected]>:
>>>
>>>> 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 [email protected].
>>>> 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
>> [email protected].
>> 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 [email protected].
For more options, visit https://groups.google.com/d/optout.
