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.

• GitHub (opens new window)
• npm (opens new window)

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

• JavaScript
• TypeScript

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:

Name	Version
Create LIFF App (opens new window)	1.1.0
Node.js (opens new window)	18.17.1
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.

Enter the endpoint URL

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.

1. Create a development environment using the Create LIFF App
2. Start the LIFF app on the localhost

Create a development environment using the Create LIFF App

1. 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.

2. 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 control+c on macOS.

3. 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-app in the project name.

4. 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
   

5. Select the language you want to use.

   ? JavaScript or TypeScript? (Use arrow keys)
   ❯ JavaScript
     TypeScript
   

6. 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 .env file in the generated my-app directory.

   ? Please enter your LIFF ID:
   Don't you have LIFF ID? Check out https://developers.line.biz/ja/docs/liff/getting-started/ (liffId)
   

7. 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
   

8. When you've finished answering all the questions, a development environment containing a LIFF app template will be generated under the my-app directory.

   yarn install v1.22.19
   warning package.json: No license field
   info No lockfile found.
   warning my-app@0.0.0: 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
   

   Options

   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 Argument choices: vanilla, react, vue, svelte, nextjs, nuxtjs
   -l	--liffid	<liff id>	Specify LIFF ID
   --js	--javascript		Generate source code written in JavaScript
   --ts	--typescript		Generate source code written in TypeScript
   --npm	--use-npm		Use npm as package manager
   --yarn	--use-yarn		Use Yarn as package manager
   -h	--help		Display help for command

Start the LIFF app on the localhost

1. Let's start the generated LIFF app on the localhost. To start the LIFF app, execute the yarn dev command. 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.
   

2. When you access the URL (http://localhost:3000 for vanilla JavaScript) displayed in the terminal with a browser, you'll see the screen with the message 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 .env file in the generated my-app directory and restart the local server.

3. Once you've confirmed that the LIFF app is running in your browser, stop the local server with Ctrl+c for Windows or control+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.