LIFF Starter

To deploy manually using the Netlify CLI, follow these steps:

1. Install the CLI: Install the Netlify CLI globally via npm.
2. Build the project: Run the build command while providing your LIFF_ID as an environment variable.
3. Login: Ensure you are authenticated with your Netlify account.
4. Deploy Draft: Run the deploy command and specify dist as the source path to create a draft site.
5. Deploy Production: Once the draft is verified, deploy to the production site.

# 1. Install Netlify CLI
$ npm install netlify-cli -g

# 2. Build with your LIFF ID
$ LIFF_ID="your LIFF ID" npm run build

# 3. Login to Netlify
$ netlify login

# 4. Deploy draft (use 'dist' as source path)
$ netlify deploy

# 5. Deploy to production
$ netlify deploy --prod

LIFF Starter is a template designed to help developers understand how to integrate the LINE Front-end Framework (LIFF) into a development environment. To begin local development, run the development server using npm or yarn.

npm run dev
# or
yarn dev

To start the development server for the Next.js version of LIFF Starter, use either npm or yarn from your terminal.

npm run dev
# or
yarn dev

Use the following commands to manage your NuxtJS-based LIFF application lifecycle, including dependency installation, local development, production builds, and static site generation.

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ node .output/server/index.mjs

# generate static project
$ yarn generate

Before running the project, you must create a .env file in the root directory of the project and define your LINE Front-end Framework (LIFF) ID using the LIFF_ID key.

LIFF_ID=YOUR_LIFF_ID

To set up the development environment, install the project dependencies using npm ci and start the local development server with npm start.

$ npm ci
$ npm start

In the Nuxt.js implementation of the LIFF starter, the LINE Front-end Framework (LIFF) is initialized within the onMounted lifecycle hook to ensure the DOM is ready.

To initialize LIFF, you must provide a liffId retrieved from the Nuxt runtime configuration. The liffId should be configured via environment variables (e.g., in a .env file) and exposed through runtimeConfig.public.LIFF_ID.

import liff from '@line/liff';

// Access runtime config for environment variables
const runtimeConfig = useRuntimeConfig();
const liffId = runtimeConfig.public.LIFF_ID;

// Initialize LIFF when the component is mounted
onMounted(async () => {
  if(!liffId) {
    console.error('Please set LIFF_ID in .env file')
    return
  }

  await liff.init({ liffId: liffId });
  console.log('LIFF init success');
  console.log('LIFF SDK version', liff.getVersion());
});

To use the LIFF SDK in a vanilla JavaScript environment, you must initialize the liff instance using liff.init(). This should typically be done once when the DOM is loaded. You must provide a liffId via the configuration object. In this starter template, the ID is expected to be available via the environment variable process.env.LIFF_ID.

import liff from '@line/liff';

document.addEventListener("DOMContentLoaded", function() {
  liff
    .init({ liffId: process.env.LIFF_ID })
    .then(() => {
        console.log("Success! you can do something with LIFF API here.")
    })
    .catch((error) => {
        console.log(error)
    })
});

The LIFF starter for Nuxt.js relies on Nuxt's runtime configuration to access environment variables. To successfully initialize the LIFF SDK, you must ensure the following keys are available in your runtimeConfig.public object:

• LIFF_ID: The unique identifier for your LIFF application, obtained from the LINE Developers Console.
• VERSION: The current version of the application (used for display purposes).

In the liff-starter-nextjs implementation, the Home component (the main page entrypoint) receives liff and liffError objects through its props.

• liff: The LINE Front-end Framework instance used to interact with the LINE app.
• liffError: An object containing error information if the LIFF initialization fails.

You can use these props to call LIFF API methods (e.g., liff.getVersion()) or handle initialization errors directly within your page component.

export default function Home(props) {
  // Destructure liff and liffError from props
  const { liff, liffError } = props;

  // Example usage:
  if (liffError) {
    console.error('LIFF Error:', liffError);
  } else {
    console.log('LIFF Version:', liff.getVersion());
  }

  return (
    <div>
      {/* Your component UI */}
    </div>
  );
}