🙋 Feature Request

Setup CI / CD settings

🤔 Expected Behavior

• run test
• run lint
• run deploy

😯 Current Behavior

• no CI / CD are implemented

💁 Possible Solution

• add CI settings to the project

🔦 Context

#15 (review)

💻 Examples

🙋 Feature Request

Add flags to the CLI

🤔 Expected Behavior

Users can set their information as flags so they can skip the process of pressing enters several times.

😯 Current Behavior

There is no way to create-liff-app without pressing enters.

💁 Possible Solution

There can be flags or args of all parameters.
This is just an example ↓

npx @line/create-liff-app <app_name> 

1st argument: app_name
-t or --template: template_name
--js: use JavaScript
--ts: use TypeScript
-l or --liffid: liff_id
--yarn: use yarn
--npm: use npm
-h or --help: tooltips for the create-liff-app
-v or --version: version of create-liff-app

We may use libraries like commander or yargs to implement this.

💻 Examples

You can check the create-next-app implementation.
https://github.com/vercel/next.js/blob/canary/packages/create-next-app/index.ts

Hello. I found a small bug there.

First, I tried @create-liff-app command in this way.

> npx @line/create-liff-app sample                                                                                                                                                                                           
Welcome to the Create LIFF App
? Which template do you want to use? nextjs
? JavaScript or TypeScript? TypeScript
? Please enter your LIFF ID:
 Don't you have LIFF ID? Check out https://developers.line.biz/ja/docs/liff/getting-started/ liffId
? Which package manager do you want to use? npm

Generating liff app using `create-app`, this might take a while.

✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next

Then my tmux creates a project of liff next app in my current directory.
After some minutes later, there are these directories in the project.

> ls
README.md           app/                next-env.d.ts       next.config.js      node_modules/       package-lock.json   package.json        pages/              postcss.config.js   public/             styles/             tailwind.config.ts  tsconfig.json

Both pages/index.tsx and app/page.tsx exists there. it occurs a conflict error in next app.
You can resolve it by just deleting pages/ directory. But let me report that issue here.
Thank you so much.

🐛 Bug Report

I can't create an app with the Nuxt.js template using the 'create-liff-app' command.

💁 Possible Solution

In Stack trace, I've got at GeneratorContext.actions (~/node_modules/create-nuxt-app/lib/saofile.js:81:22)

The code looks like this:

https://github.com/nuxt/create-nuxt-app/blob/2f58b48a9e1fb3f78c465569e8441313cfc89642/packages/create-nuxt-app/lib/saofile.js#L81

    if (this.answers.template !== 'html') {
      actions.push({
        type: 'add',
        files: '**',
        templateDir: join(frameworksDir, this.answers.template)
      })
    }

I speculate that the error is happening because there is no 'template' specification in the 'answers' option sent to 'create-nuxt-app'.

💻 Code Sample

Reproduction steps ＆ Error logs:

npx @line/create-liff-app -t nuxtjs --ts --npm liff-app
Welcome to the Create LIFF App
? Please enter your LIFF ID: 
 Don't you have LIFF ID? Check out https://developers.line.biz/ja/docs/liff/getting-started/ liffId

Generating liff app using `create-app`, this might take a while.


create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in liff-app
Trace: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:399:5)
    at validateString (node:internal/validators:163:11)
    at join (node:path:1172:7)
    at GeneratorContext.actions (/root/.npm/_npx/ea7c6e7510ea3309/node_modules/create-nuxt-app/lib/saofile.js:81:22)
    at module.exports (/root/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/runActions.js:12:30)
    at SAO.runGenerator (/root/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/index.js:133:36)
    at SAO.run (/root/.npm/_npx/ea7c6e7510ea3309/node_modules/sao/lib/index.js:101:16) {
  code: 'ERR_INVALID_ARG_TYPE'
}
    at /root/.npm/_npx/ea7c6e7510ea3309/node_modules/create-nuxt-app/lib/cli.js:56:19
{
  command: 'npx create-nuxt-app liff-app --answers {"name":"liff-app","pm":"npm","language":"ts","features":["axios"],"linter":["eslint"],"ui":"none","test":"none","mode":"universal","target":"server","devTools":"none","vcs":"none"}'
}

🌍 Your Environment

• Node.js v18.15.0
• npm 9.6.6

🙋 Feature Request

• As Vite 3 was released, we need to change current templates to the newer version.
• React / Vue / Svelte and Vanilla templates

💁 Possible Solution

• Use the Vite command internally as NextJS / NuxtJS templates do

💻 Examples

• You can check how NextJS / NuxtJS projects are created: #15

🐛 Bug Report

🤔 Expected Behavior

• No TS error emission
• No lint errors

😯 Current Behavior

Property '$liffInit' does not exist on type 'CombinedVueInstance<Vue, { message: string; error: string; }, unknown, unknown, Readonly<Record<never, any>>>'.

💁 Possible Solution

• Lint template files as create-nuxt-app way.
• Add TypeScript setting for the liffPlugin (https://typescript.nuxtjs.org/ja/cookbook/plugins/)

Hi, I really enjoy using this package to quickly generate liff projects, but I found some issues with outdated dependencies.

Currently, dependencies are hardcoded into package.jsons and some have already become outdated.
I looked into how create-next-app handles this issue and found that they install all the dependencies using spawn in runtime to get the latest versions of dependencies. Below is a demonstration of how they do it: (source code)

const dependencies = ['react', 'react-dom', 'next'];
spawn(packageManager, dependencies);

You'll gain two benefits from implementing this method:

1. Manual updates of the liff package are no longer needed
2. Up-to-date dependencies

If you think this is a good idea, just let me know and I could try to make a PR for this.
Btw, all the linebreaks in this project are CRLF, not LF as defined in .eslint.js. And there is no configuration file for installed dev-dependency prettier.

In liff-playground, LIFF.init is called before DOM.render, but in the template of create-liff-app, LIFF.init is called in useEffect.
Which is better?

liff-playground
https://github.com/line/liff-playground/blob/master/src/index.tsx

create-liff-app template
https://github.com/line/create-liff-app/blob/main/templates/react-ts/src/App.tsx

Add templates below for easier contributions & issue management

• CODEOWNERS
• ISSUE_TEMPLATE
• PULL_REQUEST_TEMPLATE

🐛 Bug Report

I tryed to use liff.i18n.setLang() in a project which generated by created-liff-app but it has not worked.

💁 Possible Solution

I found old version of @line/liff v2.19.1 in package.json and changed it to v2.21.3. So my code worked fine.

I guess it's a better what the latest @line/liff shoud be installed when generated the project by create-liff-app.

thanks.