React application for the Liferay Workshop: Building an SPA using Liferay's Headless APIs.
The application will consist of a little app to manage the travels of the headless team. Each travel will have one or more stages where visit interesting cities.
To build the back-end we will follow the Liferay Travels Back repository, where we can find the steps to create:
- A simple service created with Service Builder.
- A rest API built with Liferay REST builder.
- An extension of a Liferay Headless API.
Understand how to connect an external application with Liferay through Liferay Headless APIs. In this example, we will see how a React app uses the Liferay GraphQL endpoint using Apollo.
-
Install npm and node (LTS).
-
Javascript and React JS. It is not necessary to have experience with the development of a React application but be familiar with some concepts.
-
GraphQL (queries and mutations). As before, it is not necessary to have experience but be familiar with some concepts.
In the root folder insert the following command: npm install (or npm i for less typing 😁)
Start the app with the command npm start
Complete or uncomment the code necessary to make a request using Apollo.
Use the comments // Step 2. Get users as a guide to navigate among the code.
Complete or uncomment the code necessary to make a request using Apollo.
Use the comments // Step 3. Get, create and delete trips as a guide to navigate among the code.
Complete or uncomment the code necessary to make a request using Apollo.
Use the comments // Step 4. Get, create and delete stages as a guide to navigate among the code.
Complete or uncomment the code necessary to make a request using Apollo.
Use the comments // Step 5. Filter trip by name as a guide to navigate among the code.
Complete or uncomment the code necessary to make a request using Apollo.
Use the comments // Step 6. Actions as a guide to navigate among the code.