Edit in GitHubLog an issue

Add a static route

Adobe Commerce and Magento Open Source's built in CMS system and PageBuilder feature lets you create highly customized content pages for your storefront, but sometimes you need a page that fulfills a specific function, such as a checkout or login page.

Overview#

This tutorial provides steps for creating a custom, static route for these types of functional pages.

By the end of this tutorial, you will know how to:

  • Define a custom React component to render route content
  • Use the extensibility framework to tap into Venia UI's routes target
  • Add a new static route to the routes list which renders the custom React component

For more information on routing, see Routing.

Create a components directory#

If your project does not already have one, create a components directory under your src directory. This directory will hold your project's custom components.

Copied to your clipboard
mkdir -p src/components

Define a custom React component#

Every route needs a component to render the content. For this tutorial, you will define a component that renders a simple greeting on the page. This component will be assigned a route in a later step.

Create component directory#

Create the directory to hold the code for a custom GreetingPage component.

Copied to your clipboard
mkdir -p src/components/GreetingPage

Create greetingPage.js module#

Inside the GreetingPage component directory, create a greetingPage.js file with the following content:

Copied to your clipboard
1/* src/components/GreetingPage/greetingPage.js */
2
3import React from "react";
4import { useParams } from "react-router-dom";
5
6const hi = {
7 textAlign: "center",
8 margin: "1rem",
9};
10const wave = {
11 ...hi,
12 fontSize: "5rem",
13};
14
15const GreetingPage = () => {
16 const { who = "nobody" } = useParams();
17 return (
18 <div>
19 <h1 style={hi}>Hello, {who}!</h1>
20 <h1 style={wave}>{"\uD83D\uDC4B"}</h1>
21 </div>
22 );
23};
24
25export default GreetingPage;

This component uses a URL parameter to render a personal greeting on a page.

Create index.js file#

Inside the GreetingPage component directory, create an index.js file that exports the GreetingPage component. This pattern of exposing the module through the index.js file is the same pattern used in the Venia UI package.

Copied to your clipboard
1/* src/components/GreetingPage/index.js */
2
3export { default } from "./greetingPage";

Tap into the extensibility framework#

In version 7.0.0, PWA Studio introduced its framework for extending storefront functionality. One such extension point, gives you the ability to edit the list of routes without copying over the Routes component and its parents in the render tree.

Create an intercept file#

An intercept file is where your storefront or plugin interacts with the extensibility framework. There is no strict rule on where to create this file or what to name it.

For this tutorial, create the file under a src/targets directory.

Copied to your clipboard
1mkdir -p src/targets
2touch -p src/targets/local-intercept.js

Inside the src/targets/local-intercept.js file, write the following content:

Copied to your clipboard
1module.exports = (targets) => {
2 targets.of("@magento/venia-ui").routes.tap((routes) => {
3 routes.push({
4 name: "MyGreetingRoute",
5 pattern: "/greeting/:who?",
6 path: require.resolve("../components/GreetingPage/greetingPage.js"),
7 });
8 return routes;
9 });
10};

The code in this file accesses the routes target of @magento/venia-ui and adds a new entry to the list. It adds a new route definition object that specifies the pattern for a new route and which page component renders that route.

Register the intercept file#

Add the path to your intercept file in the pwa-studio.targets.intercept section of your project's package.json file. This registers src/targets/local-intercept.js as an intercept file during the build process.

Copied to your clipboard
1 "engines": {
2 "node": ">=10.x",
3 "yarn": ">=1.12.0"
4 },
5 "keywords": [],
6+ "pwa-studio": {
7+ "targets": {
8+ "intercept": "src/targets/local-intercept"
9+ }
10+ }

View route content#

Start your dev server using yarn start or yarn develop and navigate to the /greeting/world route.

You should see the following content on the page:

hello world jsx

Congratulations#

You just created a static route in your storefront project!

  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.