GithubHelp home page GithubHelp logo

stevector / alex-moreno-decoupledpocfe Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alex-moreno/decoupledpocfe

0.0 1.0 0.0 1.24 MB

License: GNU General Public License v3.0

Shell 0.68% JavaScript 99.24% CSS 0.08%

alex-moreno-decoupledpocfe's Introduction

Pantheon Decoupled Kit Next Drupal Starter

There are two ways to get started with the Next Drupal Starter:

Option 1: Use create-next-app

  1. In your terminal, run the following command:
npx create-next-app -e https://github.com/pantheon-systems/next-drupal-starter --use-npm
  1. Follow the prompts in your terminal to complete the setup.

Option 2: Clone the repo

  1. Clone this repo:
git clone [email protected]:pantheon-systems/next-drupal-starter.git
  1. Install node modules
cd next-drupal-starter && npm install

For either option, create a .env.development.local file and update it with the following: (See .env.example for an example)

BACKEND_URL=
IMAGE_DOMAIN=

# Used to set the debug mode for the DrupalState store(s)
# If not set, debug mode for the store(s) is set to false
DEBUG_MODE=

# this value can also bet set in the command line
# before running commands for example
# FRONTEND_URL=example.com npm run build
FRONTEND_URL=

# These variables are needed to enable Preview
PREVIEW_SECRET=
CLIENT_ID=
CLIENT_SECRET=
  1. Run lando start

  2. Open a browser and navigate to http://drupalnext.lndo.site/.

Pantheon @pantheon-systems/drupal-kit

The Pantheon @pantheon-systems/drupal-kit is included as a dependency in this project. This allows developers to make use of utility functions to simplify the process of building and maintaining a decoupled site on Pantheon, including:

  • addSurrogateKeyHeader()
  • updateMaxAge()

Full documentation can be found at: https://github.com/pantheon-systems/decoupled-kit-js/tree/canary/web/docs/Packages/drupal-kit

Example Pages

  • examples/auth-api - a simple example that sources data from an endpoint that requires authorization.
  • examples/pagination - an example that sources paged data from JSON:API and paginates it client side.

Customizing the Starter

The pages/recipes directory can be safely removed if you are using a Drupal instance that does not source the Umami demo data

For a guide on creating your first Next Drupal customization, see Your First Drupal Customization

Tests

Tests are written with vitest. All new functionality should have unit tests or snapshot tests where applicable.`

Any fetch calls should be mocked with msw in setupFile.js

There are two data profiles to test against: the Umami profile and the Default profile. These profiles are available as Drupal modules and contain data to render the frontend with. See our Backend Starters for more information on setting up a Drupal instance.

Commands

This section assumes the package manager in use is npm. If you are not using npm, replace npm with the name of your package manager. To run the tests for both profiles sequentially:

npm test

To run the test for a single profile:

# test against the umami profile data
npm run test:umami
# tests against the default profile data
npm run test:default

alex-moreno-decoupledpocfe's People

Contributors

alex-moreno avatar backlineint avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.