# 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

  • JavaScript
  • TypeScript

# Frameworks that can be generated with Create LIFF App

# 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.0.0
Node.js (opens new window) 16.13.1
Yarn (opens new window) 1.22.18

# 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
    
  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 command+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 whether to install the dependency packages immediately. If you select Y (Yes), the dependency packages will be installed. If you choose n (No), you can still install them later with yarn install command.

    ? Do you want to install it now with package manager? (Y/n)
    
  8. 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
    
  9. 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.18
    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
    

# 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.18
    warning package.json: No license field
    $ vite
    
      vite v2.9.1 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.

    Success

    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.

    Failure

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