How to Set Up LIFF Application Development Environment for a Team

2022.02.25

The CX Division LINE Team is mainly responsible for the development of LIFF applications that run on LIFF browser and LINE mini-app. We use React and other common web technologies for front-end development, but when we consider using third-party libraries or checking the UI elements, we often need to confirm that the application will work properly in LIFF browser and on various OS and devices.

This article summarizes the procedure for creating an environment where you can distribute the LIFF URL to your development team members and have them check the application on their own devices.

Steps We Will Follow

I follow the steps below when I need to try out a LIFF application under development from actual devices and make application testable by other team members.

  • Create a sample application.
  • Deploy and host your web app in Cloud environment.
  • Login to the LINE Developers Console and create a provider.
  • Create a LINE Login channel under the provider.
  • Create a LIFF Application under LINE Login.
  • Invite team members to join the LIFF channel.
  • Access the LIFF URL from your mobile device to see how it works.

Step 1. Create a Sample Application

As an example, we use sample application I've previously created.

In this sample application, I've used third party library called react-beautiful-dnd. The goal of this article is to make this application testable by the team members' mobile devices to confirm this third-party library works nicely in different devices.

If you just want to check the flow, you can create a sample app with create-react-app command, and deploy it as a LIFF app to view it on a mobile device as a goal.

npx create-react-app sample_app --typescript

Step 2. Deploy and Host Sample Application with Amplify Console

In order to specify the page URL on the LINE Developers Console, we need to deploy our web application on the Internet somewhere. In this example, we will use Amplify Console to deploy and host the React app that we just created.

First, let's push the React sample project to a Github repository.

After committing the code to Github, we will configure the Amplify Console CI pipeline by going to AWS Management Console > AWS Amplify and selecting New app > Host web app.

On the next screen, select Github and branch, leave the other settings as they are, and click Save and Deploy.

After a while, you will be able to see from the Amplify Console dashboard that the deployment is complete, and you can check the screen from the URL on the bottom left. We will specify this URL as the LIFF Callback URL in the LINE Developer Console later.

Step 3. Log into LINE Developers Console and Create a Provider

Login to the LINE Developers Console and create a provider using the Create button next to Providers.

Step 4. Add LINE Login Channel under the Provider

After creating a provider, you can create a LINE Login channel under the provider. Create a LINE Login with the following settings.

Setting Value
Channel type LINE Login
Channel name Channel name
Channel description Channel description
App types Web App

Step 5. Create a LIFF Application under LINE Login

Open the LIFF tab of the LINE Login and click the Add button to add a LIFF application.

Add the LIFF application with the following settings.

Setting Value What is it
LIFF app name SampleReactApp LIFF Application Name
Size Full Screen height and width area when the application is opened in LIFF Browser.
Endpoint URL The URL that was dispatched when you deployed your web app in the Amplify Console.
Scopes Profile
Bot Link feature Off
Scan QR OFF liff.scanCode()feature enabled/disabled
Module Mode OFF

Reference:Adding a LIFF app to a channel

Step 6. Invite Team Members to join the LIFF Channel

In order to access the LIFF app from a private LINE Channel, you need to register an email address associated with the LINE account of the team member in the Roles field.

There are three types of roles: Admin, Tester, and Member, with Admin > Tester > Member being less privileged.

A confirmation email will be sent to added member's registered email address. The Role will be added when email is verified.

Step 7. Access the LIFF URL from Mobile Devices

If the sample application is viewable from your team member's device, you have completed the creation of the LIFF Application development environment for a team.

You can check the LIFF URL from the LIFF tab of the LINE Developers Console.

When the authentication screen appears, click "Allow".

The application is now testable from member's devices.

I found that the react-beautiful-dnd used in the sample app also works nicely in the LIFF browser.

Original Post in Japanese :