Improve developer experience when starting a Vue app

[fadeev]

Right now the following steps are required to get a working Vue template:

ignite s chain example
cd example
ignite s vue
ignite g composables <--
cd ts-client
npm i <--
cd ../vue
npm i
npm run dev

This is fine, more or less, but two of these steps are not obvious at all.

If we can't automate this, we should have a note telling users what to do.

ignite s vue

⭐️ Created a Vue template in ./vue 
ℹ️ Generate the prerequisite API code to start using the template:

 % ignite generate composables 

We should also add a link to documentation here once we have the docs.

ignite g composables

✔ Generated Typescript Client and Vue 3 composables
⋆ Typescript client path: /Users/fadeev/example/ts-client
⋆ Vue composables path: /Users/fadeev/example/vue/src/composables

ℹ️ Don't forget to install dependencies before using the client:

 % cd ts-client
 % npm install

[fadeev]

@aljo242 I propose we add this to v0.26 #3274

[scottcarterco]

I think creating a single command to reduce all those steps on the developer's side is a really great idea Denis. Out of curiosity, why do we use vue instead of something, such as templates or even vuetemp (if we wanted to keep the context)? To me, using vue seems a bit strange because it's a JS framework.

[clockworkgr]

Right now the following steps are required to get a working Vue template:

ignite g composables <--
cd ts-client
npm i <--

this part should not be necessary as there is a postinstall script in the template that installs the ts-client dependencies for you:

https://github.com/ignite/web/blob/develop/packages/vue-template/postinstall.js

as far as the composables/vuex generation is concerned, I've opened a discussion in slack

[clockworkgr]

well we are generating a boilerplate vue app....and it was the only type we had so it kinda made sense...

we will now have two (react and vue) so maybe something like:
ignite s webapp --type=vue or
ignite s webapp --type=react

makes sense....but I think the shorthands (ignite s vue / ignite s react ) are fine too

[fadeev]

this part should not be necessary as there is a postinstall script in the template that installs the ts-client dependencies for you:

@clockworkgr after running:

ignite s chain blog
cd blog
ignite s vue
ignite g composables
cd vue
npm i
npm run dev

This is what I get:

[fadeev]

@scottcarterco we have commands to create a Vue template and a React template. We could call both directories frontend or webapp (because template can mean very different things), but if a user decided to create both to compare, for example, they'd have to use a flag to provide different names.

[fadeev]

@clockworkgr @scottcarterco I think we're talking about different things here. I think Scott meant having a command that would scaffold a Vue template and generate composables in one go.

[clockworkgr]

this part should not be necessary as there is a postinstall script in the template that installs the ts-client dependencies for you:

@clockworkgr after running:

ignite s chain blog
cd blog
ignite s vue
ignite g composables
cd vue
npm i
npm run dev

This is what I get:

that's related to #3122 ....the postinstall script wortks fine

ignite s chain blog
cd blog
ignite s vue
ignite g composables --clear-cache
cd vue
npm i
npm run dev

should work

[clockworkgr]

@clockworkgr @scottcarterco I think we're talking about different things here. I think Scott meant having a command that would scaffold a Vue template and generate composables in one go.

in part yes....see discussion in slack

[scottcarterco]

@fadeev @clockworkgr that is indeed what I meant as a means to provide devs a shortcut in the process since it's a common task path. Would be an optional shortcut if they want the "standard" outcome and they could also do it in the current way or with a flag on a revised single command to customize parts.

[AndrewDonelson]

While you're at it add a flag to disable the front end as well. For example, I already have a PWA app in a separate repository. I deleted the vue folder but it keeps coming back.

Example:

ignite scaffold chain foobar --no-frontend --no-module

[fadeev]

@AndrewDonelson in the next version the CLI will actually not generate the Vue template by default and it will be up to the developer to decide if they want to go with Vue, React or no template at all.

[mondainai247]

Closing this issue as we can possibly fix this by creating an ignite app. Also, users who want to scaffold a front end app, can do so simply by following this tutorial.

https://dev.to/ignitehq/ignite-tutorials-part-2-44am