Launch it on Gitpod with a Lupus Decoupled Drupal backend.
- Rendering custom elements via components
- Rendering a tree of custom elements
- Forwarding /some-page requests to the backend and rendering results
- breadcrumbs
- metatags
- messages
- Drupal error pages
- Drupal redirect support
- Menus (component needs to be ported)
- Drupal forms
- Frontend login
- Custom layouts
- Views (component needs to be ported)
- Drupal tabs (component needs to be ported)
When working on this template, things can be tested best on gitpod by modifying the launch link:
Testing frontend repository branches Use the following link:
https://gitpod.io/new/#DP_PROJECT_NAME=lupus_decoupled,DP_ISSUE_BRANCH=1.x,DP_PROJECT_TYPE=project_module,DP_MODULE_VERSION=1.x,DP_PATCH_FILE=,FRONTEND_REPOSITORY=https%3A%2F%2Fgithub.com%2Fdrunomics%2Flupus-decoupled-nextjs-demo,FRONTEND_BRANCH=<<BRANCH>>,CUSTOM_ELEMENTS_VERSION=3.*,DP_INSTALL_PROFILE=standard/https://github.com/drunomics/lupus-decoupled-project/tree/main
You can quickly try this project online using Stackblitz:
- After launching the project, create a
.env
file in the root directory. - Paste the following environment variable into the
.env
file:
NEXT_PUBLIC_DRUPAL_BASE_URL="https://8080-drunomics-lupusdecouple-xeqrf6qqxj3.ws-eu116.gitpod.io"
- Save the file and continue working with the project directly in Stackblitz.
To run the project on your local machine:
-
Clone the Repository:
git clone [email protected]:drunomics/lupus-decoupled-nextjs-demo.git
-
Create a
.env
File:- If a
.env
file doesn't already exist in the root directory, create one. - Then, add the following environment variable:
NEXT_PUBLIC_DRUPAL_BASE_URL="https://8080-drunomics-lupusdecouple-xeqrf6qqxj3.ws-eu116.gitpod.io"
- If a
-
Install Dependencies: Navigate to the project directory and install the necessary dependencies:
npm install
- Run the Project: Start the development server:
npm run dev
- View the Project: Open your browser and navigate to
http://localhost:3000
to view the application
For local setup you'll get some network error until base URLs are set right. To do so:
- Set the Drupal base URL(
NEXT_PUBLIC_DRUPAL_BASE_URL
) inenv.file
, e.g.https://drunomics-lupusdecouple-xeqrf6qqxj3.ws-eu116.gitpod.io/
When using a Drupal gitpod/DrupalPod as a backend, make sure to set your environment to "Shared" via the workspace options menu, as found in the dashhboard at https://gitpod.io. That way the frontend can connect to it. - Test it. Best add some content nodes and some menu-items pointing to them. /node/1 of the backend is available under /node/1 in the frontend. You should see some naked frontend with menus, breadcrumbs & basic node-content (body field) working.
Make sure to install the dependencies:
# npm
npm install
# yarn
yarn install
# pnpm
pnpm install
Start the development server on http://localhost:3000
npm run dev
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Check out the deployment documentation for more information.