Documentation

Remote Apps with Headless APIs

Available 7.4+

After creating and publishing objects, headless REST APIs are automatically generated. Here you’ll see how to integrate these endpoints to create a simple CRUD (create, read, update, and delete) remote app.

Set Up Liferay DXP

Start a new Liferay DXP instance by running

docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u29

Sign in to Liferay at http://localhost:8080 using the email address test@liferay.com and the password test. When prompted, change the password to learn.

Then, follow these steps to add the /o/c/* URL pattern to the Default Portal CORS Configuration:

  1. Open the Global Menu (Global Menu), click the Control Panel tab, and go to System SettingsSecurity Tools.

  2. Go to the Portal Cross-Origin Resource Sharing (CORS) tab and click Default Portal CORS Configuration.

  3. Add a URL Pattern with the /o/c/* value and click Save. This enables CORS for all Object APIs.

    Add the /o/c/* URL Pattern for Object APIs.

Creating an Object for the CRUD app

  1. Open the Global Menu (Global Menu), click the Control Panel tab, and go to Objects.

  2. Click the Add button (Add Button) and enter these values:

    Field

    Value

    Label

    J4X7-Object

    Plural Label

    J4X7-Objects

    Name

    J4X7Object

    Note

    The provided React app uses these values.

  3. Select the new Object draft, click the Field tab, and add these fields:

    Label

    Field Name

    Type

    name

    name

    Text

    description

    description

    Text

  4. Click the Details tab and click Publish.

Set Up the CRUD app

  1. Download and unzip the CRUD app.

    curl https://learn.liferay.com/dxp/latest/en/building-applications/remote-apps/remote-apps-tutorials/liferay-j4x7.zip -O
    
    unzip liferay-j4x7.zip
    
    cd liferay-j4x7
    
  2. Verify you have node and yarn installed. If you don’t, run the following command and follow the prompts:

    ./setup_tutorial.sh
    
  3. Navigate to the CRUD app’s folder and start the React server.

    cd j4x7-remote-app
    
    yarn start
    

    Once started, go to localhost:3000 to view the CRUD app.

  4. Enter a name and description and click Add to add a J4X7 Object. A new item has been added.

    Input a name and description and click Add.

  5. Note the J4X7 Object’s ID number that you just created. Enter the ID number and a new name and description. Click Patch. The item has been updated with the new name and description.

  6. Enter the ID number and click Delete. The item has now been deleted.

Examine the Code

The sample CRUD app is separated into two parts: a file that contains the API requests and files that contain the forms to handle the CRUD operations.

Handle Requests

The Requests.js file uses JavaScript’s built-in fetch() method.

getObjects() makes a GET request for all the objects.

export const getObjects = () => {
	return fetch(`http://localhost:8080/o/c/j4x7objects/`, {
		headers: {
			Authorization: 'Basic ' + btoa('[email protected]:learn'),
			'Content-Type': 'application/json',
		},
		method: 'GET',
	});
};

addObject() makes a POST request with a name and description for a new object.

export const addObject = object => {
	return fetch(`http://localhost:8080/o/c/j4x7objects/`, {
		body: JSON.stringify({
			description: object.description,
			name: object.name,
		}),
		headers: {
			Authorization: 'Basic ' + btoa('[email protected]:learn'),
			'Content-Type': 'application/json',
		},
		method: 'POST',
	});
};

patchObject() makes a PATCH request with a specific object ID and a new name and description.

export const patchObject = object => {
	return fetch(`http://localhost:8080/o/c/j4x7objects/${object.id}`, {
		body: JSON.stringify({
			description: object.description,
			name: object.name,
		}),
		headers: {
			Authorization: 'Basic ' + btoa('[email protected]:learn'),
			'Content-Type': 'application/json',
		},
		method: 'PATCH',
	});
};

deleteObject() makes a DELETE request with a specific object ID.

export const deleteObject = id => {
	return fetch(`http://localhost:8080/o/c/j4x7objects/${id}`, {
		headers: {
			Authorization: 'Basic ' + btoa('[email protected]:learn'),
			'Content-Type': 'application/json',
		},
		method: 'DELETE',
	});
};

Note

Basic authentication is used here for demonstration purposes. For production, you should authorize users via OAuth 2.0.

Implement Forms

GetForm.js calls the getObjects method and parses the response as JSON. Each J4X7 entry is listed by the form.

AddForm.js receives input and calls the addObject method upon the user clicking Add.

PatchForm.js receives input and calls the patchObject method upon the user clicking Patch.

DeleteForm.js receives input and calls the deleteObject method upon the user clicking Delete.

The forms are gathered together and displayed on one page with the App.js file.

Additional Information

Creating a Liferay Remote App Headless Framework Integration