# Building a LIFF app development environment with Create LIFF App
# What is Create LIFF App
Create LIFF App is a CLI tool that allows you to build a development environment for LIFF apps with a single command, like Create React App (opens new window) by React or Create Next App (opens new window) by Next.js. Answering questions from Create LIFF App generates the environment, including the LIFF app template, so you can start development immediately.
For more information on the differences between the LIFF starter app and LIFF Playground and Create LIFF App, see Tools to support LIFF app development.
# Languages and frameworks
The following languages and frameworks are currently available for Create LIFF App. For example, you can generate Next.js source code written in TypeScript.
# Languages that can be generated by the Create LIFF App
# Frameworks that can be generated with Create LIFF App
- Next.js (opens new window)
- Nuxt (opens new window)
- React (opens new window)
- Vue.js (opens new window)
- Svelte (opens new window)
# Operating environment
Create LIFF App runs on Node.js. You can use either Yarn or npm for package management, but the instructions on this page use Yarn. The content of this page has been tested with each of the following versions:
|Create LIFF App (opens new window)||1.1.0|
|Node.js (opens new window)||17.1.0|
|Yarn (opens new window)||1.22.19|
# Advance preparation
A LIFF ID is required when running Create LIFF App. Read Create a channel and Adding a LIFF app to your channel first to get your LIFF ID.
You'll need to enter the Endpoint URL when running Create LIFF App. You can modify the endpoint URL later, so you may enter a temporary URL (such as
https://example.com/) at this point.
# Using the Create LIFF App
In the next two steps, use Create LIFF App to create a development environment for your LIFF app and check it works locally.
# Create a development environment using the Create LIFF App
Run Create LIFF App. Open a terminal or command line tool (hereinafter referred to as "terminal"). On any directory, run the following command:
$ npx @line/create-liff-app
Note that options can be specified when executing the command.
From here you will answer the Create LIFF App questions. If you want to stop in the middle of a question, you can interrupt with ctrl+c on Windows or command+c on macOS.
Enter a project name. If you don't enter anything, the project name will default to
my-app. The project name will be used for the name of the directory generated by Create LIFF App and for other purposes.
? Enter your project name: (my-app)
The following steps proceed on the assumption that you've entered
my-appin the project name.
Select the library or framework you want to use.
? Which template do you want to use? (Use arrow keys) ❯ vanilla react vue svelte nextjs nuxtjs
Select the language you want to use.
Enter the LIFF ID. You may proceed without entering a LIFF ID. If you want to enter or change the LIFF ID later, edit the
.envfile in the generated
? Please enter your LIFF ID: Don't you have LIFF ID? Check out https://developers.line.biz/ja/docs/liff/getting-started/ (liffId)
Select which package manager to use. You can use either Yarn or npm for package management, but here we use Yarn.
? Which package manager do you want to use? (Use arrow keys) ❯ yarn npm
When you've finished answering all the questions, a development environment containing a LIFF app template will be generated under the
yarn install v1.22.19 warning package.json: No license field info No lockfile found. warning firstname.lastname@example.org: No license field [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 25.06s. Done! Now run: cd my-app yarn dev
Create LIFF App accepts the options listed in the table below. For example, to generate Next.js source code written in TypeScript, execute the following command. Note that the items specified in the options will be omitted from the Create LIFF App questions.
$ npx @line/create-liff-app -t nextjs --ts
Short option Long option Argument Behavior -v --version Display the version number -t --template <template> Specify the template
# Start the LIFF app on the localhost
Let's start the generated LIFF app on the localhost. To start the LIFF app, execute the
yarn devcommand. When the following message appears and the terminal screen output stops, the LIFF app is running on the local server.
$ yarn dev yarn run v1.22.19 warning package.json: No license field $ vite vite v2.9.13 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 170ms.
When you access the URL (
LIFF init succeeded.as follows.
If you haven't set a LIFF ID, you will see a screen with the message
LIFF init failed.as follows. Write the LIFF ID to the
.envfile in the generated
my-appdirectory and restart the local server.
Once you've confirmed that the LIFF app is running in your browser, stop the local server with ctrl+c for Windows or command+c for macOS.
# Next step
You're now ready to develop your LIFF app.
To check the operation of the LIFF app on LINE, deploy the generated LIFF app to any server such as Netlify and set the URL to Endpoint URL. This page doesn't explain how to deploy to Netlify or how to check the operation of the LIFF app on LINE. See deploying LIFF starter app to a server.
For more information on the actual development, see Developing a LIFF app.