### Install Dependencies

Source: https://github.com/line/line-liff-v2-starter/blob/master/README.md

Run this command to install all necessary project dependencies.

```sh
$ npm ci
```

--------------------------------

### Run Development Server

Source: https://github.com/line/line-liff-v2-starter/blob/master/src/vanilla/README.md

Use npm or yarn to start the development server for the LIFF starter template.

```bash
npm run dev
```

```bash
yarn dev
```

--------------------------------

### Install Netlify CLI

Source: https://github.com/line/line-liff-v2-starter/blob/master/README.md

Install the Netlify command-line interface globally to manage Netlify deployments.

```sh
$ npm install netlify-cli -g
```

--------------------------------

### Run Local Development Server

Source: https://github.com/line/line-liff-v2-starter/blob/master/README.md

Execute this command to start a local development server for testing.

```sh
$ npm start
```

--------------------------------

### Run Development Server

Source: https://github.com/line/line-liff-v2-starter/blob/master/src/nextjs/README.md

Start the development server using npm or yarn to begin working with the LIFF starter template.

```bash
npm run dev
# or
yarn dev
```

--------------------------------

### Nuxt.js Environment and Build Commands

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Sets up the LIFF_ID in the .env file and provides commands for installing dependencies, running the development server, building for production, and generating a static site.

```bash
# src/nuxtjs/.env
LIFF_ID=1234567890-AbCdEfGh

# Install and run dev server (localhost:3000)
yarn install
yarn dev

# Build for production
yarn build
node .output/server/index.mjs

# Generate static site
yarn generate
```

--------------------------------

### Manual Netlify CLI Deployment

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Provides commands for manual deployment using the Netlify CLI, including installing the CLI, building the project with a specified LIFF_ID, logging in, and deploying to staging or production.

```bash
# Manual Netlify CLI deployment
npm install -g netlify-cli

# Build with your LIFF ID
LIFF_ID="1234567890-AbCdEfGh" npm run build

# Login to Netlify
netlify login

# Deploy to staging (draft URL)
netlify deploy

# Deploy to production
netlify deploy --prod
```

--------------------------------

### Vanilla JavaScript Webpack Configuration

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Merges common Webpack configurations with vanilla-specific settings for JS/CSS bundling, environment variable injection, and HTML template generation. Includes development server setup and CSS handling.

```javascript
// src/vanilla/webpack.config.js
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const env = process.env.NODE_ENV; // "development" or "production"

const commonConfig = {
  mode: env,
  devServer: { port: 3000 },
  resolve: { fallback: { crypto: false } },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' },
      {
        test: /\.css$/,
        use: [
          env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new Dotenv({ systemvars: true }), // loads .env and merges with process.env
    new MiniCssExtractPlugin({ filename: "[name].css" }),
  ],
};

const vanillaConfig = merge(commonConfig, {
  name: "vanilla",
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/',
  },
  plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
});

module.exports = [vanillaConfig];
```

--------------------------------

### Deploy to Netlify (Draft)

Source: https://github.com/line/line-liff-v2-starter/blob/master/README.md

Deploy the built project to Netlify as a draft site. You will be prompted to create a site name and select the 'dist' folder as the source path.

```sh
$ netlify deploy
```

--------------------------------

### Deploy to Netlify (Production)

Source: https://github.com/line/line-liff-v2-starter/blob/master/README.md

Deploy the built project to Netlify as a production site after confirming the draft deployment.

```sh
$ netlify deploy --prod
```

--------------------------------

### Build Project for Netlify

Source: https://github.com/line/line-liff-v2-starter/blob/master/README.md

Build the project for deployment, ensuring to replace 'your LIFF ID' with your actual LIFF ID.

```sh
$ LIFF_ID="your LIFF ID" npm run build
```

--------------------------------

### NuxtJS Build and Development Commands

Source: https://github.com/line/line-liff-v2-starter/blob/master/src/nuxtjs/README.md

Standard commands for managing dependencies, running the development server with hot reloading, building for production, and generating a static project.

```bash
# install dependencies
$ yarn install
```

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

```bash
# build for production and launch server

$ yarn build
$ node .output/server/index.mjs
```

```bash
# generate static project
$ yarn generate
```

--------------------------------

### Netlify Deployment Configuration

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Configures Netlify for one-click deployment of a vanilla JavaScript application. Specifies the build command and publish directory, and sets the LIFF_ID environment variable.

```toml
# netlify.toml (root)
[build]
  command = "cd src/vanilla && yarn install && yarn build"
  publish = "src/vanilla/dist"

[template.environment]
  LIFF_ID = "Your LIFF ID which is acquired from LINE Dev Center"
```

--------------------------------

### Login to Netlify Account

Source: https://github.com/line/line-liff-v2-starter/blob/master/README.md

Authenticate your Netlify CLI with your Netlify account.

```sh
$ netlify login
```

--------------------------------

### Initialize LIFF SDK - Vanilla JavaScript

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Initializes the LIFF SDK on page load using the LIFF_ID from environment variables. Accesses user profile or redirects to login if not logged in. Requires dotenv-webpack for environment variable injection.

```javascript
// src/vanilla/index.js
import liff from '@line/liff';

document.addEventListener("DOMContentLoaded", function () {
  liff
    .init({ liffId: process.env.LIFF_ID }) // LIFF_ID injected by dotenv-webpack
    .then(() => {
      console.log("LIFF initialized successfully.");

      // Example: Get the current user's profile
      if (liff.isLoggedIn()) {
        liff.getProfile().then((profile) => {
          console.log("User ID:", profile.userId);
          console.log("Display Name:", profile.displayName);
          console.log("Picture URL:", profile.pictureUrl);
        });
      } else {
        liff.login(); // Redirect to LINE login
      }
    })
    .catch((error) => {
      console.error("LIFF init failed:", error);
    });
});
```

```bash
# .env file in src/vanilla/
LIFF_ID=1234567890-AbCdEfGh

# Run dev server
yarn dev
# or build for production
LIFF_ID="1234567890-AbCdEfGh" yarn build
```

--------------------------------

### Initialize LIFF SDK - Next.js (App-level)

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Initializes LIFF within the `_app.js` file using `useEffect` for client-side execution. The initialized LIFF object or error is passed to all pages via `pageProps`. Requires LIFF_ID to be set as an environment variable.

```jsx
// src/nextjs/pages/_app.js
import "../styles/globals.css";
import { useState, useEffect } from "react";
import liff from "@line/liff";

function MyApp({ Component, pageProps }) {
  const [liffObject, setLiffObject] = useState(null);
  const [liffError, setLiffError] = useState(null);

  useEffect(() => {
    liff
      .init({ liffId: process.env.LIFF_ID })
      .then(() => {
        setLiffObject(liff); // Store the initialized liff object in state
      })
      .catch((error) => {
        if (!process.env.LIFF_ID) {
          console.info("Please set LIFF_ID as an environment variable.");
        }
        setLiffError(error.toString());
      });
  }, []);

  // Inject liff and liffError into every page's props
  pageProps.liff = liffObject;
  pageProps.liffError = liffError;
  return <Component {...pageProps} />;
}

export default MyApp;

```

```jsx
// src/nextjs/pages/index.js — consuming liff from props
export default function Home({ liff, liffError }) {
  if (liffError) return <p>LIFF Error: {liffError}</p>;
  if (!liff) return <p>Loading LIFF...</p>;

  // Access LIFF API after initialization
  const version = liff.getVersion();    // e.g., "2.27.2"
  const isInClient = liff.isInClient(); // true if running inside LINE app
  const isLoggedIn = liff.isLoggedIn();

  return <p>LIFF v{version} — In LINE client: {String(isInClient)}</p>;
}

```

```bash
# src/nextjs/.env.local
LIFF_ID=1234567890-AbCdEfGh

# Dev server (port 9000)
yarn dev

# Production build
yarn build && yarn start

```

```javascript
// src/nextjs/next.config.js — exposes LIFF_ID to client bundle
module.exports = {
  reactStrictMode: true,
  env: {
    LIFF_ID: process.env.LIFF_ID,
  },
};

```

--------------------------------

### Environment Configuration for LIFF ID

Source: https://github.com/line/line-liff-v2-starter/blob/master/src/nuxtjs/README.md

Create a .env file in the project root to store your LIFF ID. This is essential for the application to connect with the LIFF service.

```bash
LIFF_ID=YOUR_LIFF_ID
```

--------------------------------

### Nuxt.js LIFF Initialization

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Initializes LIFF within Nuxt.js's onMounted hook to ensure browser execution. Accesses LIFF_ID and other configurations from runtimeConfig.public. Handles login and profile retrieval.

```vue
<!-- src/nuxtjs/pages/index.vue -->
<script setup lang="ts">
import liff from '@line/liff';

const runtimeConfig = useRuntimeConfig();
const liffId = runtimeConfig.public.LIFF_ID;
const version = runtimeConfig.public.VERSION; // read from package.json

onMounted(async () => {
  if (!liffId) {
    console.error('Please set LIFF_ID in .env file');
    return;
  }

  try {
    await liff.init({ liffId });
    console.log('LIFF init success');
    console.log('LIFF SDK version:', liff.getVersion()); // e.g., "2.27.2"

    if (liff.isLoggedIn()) {
      const profile = await liff.getProfile();
      console.log('Logged in as:', profile.displayName);
    } else {
      liff.login();
    }
  } catch (err) {
    console.error('LIFF init failed:', err);
  }
});
</script>
```

--------------------------------

### Nuxt.js Runtime Configuration

Source: https://context7.com/line/line-liff-v2-starter/llms.txt

Configures Nuxt.js to expose environment variables like LIFF_ID and VERSION to the client-side. Reads LIFF_ID from .env and VERSION from package.json.

```typescript
// src/nuxtjs/nuxt.config.ts — exposes env variables to the client
import pkg from './package.json';

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      LIFF_ID: process.env.LIFF_ID,
      VERSION: pkg.version || '0.1.0',
    },
  },
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.