GitHub Readme.md
This is a small web application that demonstrates the basic functionality of the LINE Front-end Framework (LIFF).
Depending on how you want to use LIFF, choose one of these methods for deploying the LIFF v2 starter app:
Follow the below instructions to deploy your app using the Heroku button and Node.js without customization.
https://{Heroku app name}.herokuapp.com
). You'll need it when you add the app to LIFF.https://liff.line.me/{liffId}
.chat_message.write
. This scope is required for the LIFF app to send messages on behalf of the user.MY_LIFF_ID
with your LIFF ID as the value.https://{Heroku app name}.herokuapp.com
) and confirm that your app is operational. You should see a number of buttons, such as Open External Window and Close LIFF App.For more information about how to try the app, see Trying the app.
To get more information, you can check your app's logs using Heroku's GUI or Heroku CLI.
To get more information, check your app's logs online:
You'll find the log under Application Logs.
Log in to Heroku from the command line (if you haven't already).
$ heroku login
Check the logs.
$ heroku logs --app {Heroku app name} --tail
Follow the below instructions to deploy your customized app using Heroku and Node.js.
Make sure you have the following installed.
Clone the line-liff-starter GitHub repository.
git clone https://github.com/line/line-liff-v2-starter
cd
into line-liff-v2-starter
directory.
Install the dependencies by running:
$ npm install
Log in to Heroku from the command line.
$ heroku login
Create a named Heroku app.
$ heroku create {Heroku app name}
Take a note of your app's URL (https://{Heroku app name}.herokuapp.com
). You'll need it when you add the app to LIFF.
Add a remote for Heroku to your local repository.
$ heroku git:remote -a {Heroku app name}
line://app/{liffId}
Set your LIFF ID using an environment variable for local testing.
Heroku recommends setting up an .env
file to use an environment variable in a local environment.
$ heroku config:get MY_LIFF_ID={liffId} -s >> .env
Note: Don't commit the .env
file to GitHub. To exclude it, add the .env
file to your .gitignore
.
Customize your app. For more information about available LIFF methods, see API reference.
Run the app locally to preview your changes:
heroku local
View the app by browsing to localhost:5000.
Set your LIFF ID using an environment variable for production.
heroku config:set MY_LIFF_ID={liffId}
If you're happy with your changes, stage, commit, and deploy the app.
$ git add .
$ git commit -m "My first commit"
$ git push heroku master
Browse to your app's URL (https://{Heroku app name}.herokuapp.com
) and confirm that your app is operational. You should see a number of buttons, such as Open External Window and Close LIFF App.
Lastly, check whether your channel status is Published.
For more information about how to try the app, see Trying the app.
To get more information, check your app's logs using Heroku's GUI or Heroku CLI. Refer to this section for more information.
Follow the below instructions to deploy your app using the server platform of your choice.
Clone the line-liff-starter repository.
git clone https://github.com/line/line-liff-v2-starter
cd
into line-liff-v2-starter
directory.
Set the useNodeJS
variable to false
in public/liff-starter.js
.
const useNodeJS = false;
Remove Heroku and Node.js specific files (app.json
, index.js
, package.json
, and Procfile
) from your workspace.
Host the files on a web server.
Follow the instructions on the page Adding a LIFF app.
Take a note of your LIFF ID, because you'll need it for the next part. The LIFF ID is the final part of the LIFF URL shown in the console: line://app/{liffId}
Set your LIFF ID to the defaultLiffId
variable in public/liff-starter.js
.
const defaultLiffId = "{liffId}";
You can open your LIFF app in LINE by creating a simple link from any chat:
line://app/{liffId}
and send the message. (For example, if your LIFF ID is 123
, send the message line://app/123
.)To open your LIFF app in your browser, enter the app's Heroku URL: https://{Heroku app name}.herokuapp.com
You'll find the following buttons in the starter app.
ℹ️ Some buttons are available only in either LINE's in-app browser or in a regular browser. See also the API reference.
Button Description LINE browser Regular browser Open External Window Openshttps://line.me
in LINE's in-app browser.
✅
✅
Close LIFF App
Closes the LIFF app.
✅
❌
Open QR Code Reader
Opens the QR code reader and outputs the result. liff.scanCode()
is temporarily unavailable on LINE for iOS v9.19.0 and later.For API calls associated with the buttons, see Calling the LIFF API.