Managing Pages in Your App

Pages define both the structure of your app and how users navigate through it in Codux. If you started your project using one of our Remix templates, you're ready to go. Otherwise, refer here for information on defining your Remix app so that Codux can manage its pages effectively.
In the context of Codux, pages are the visual representation of Remix routes, forming the core structure of your web application. Each page corresponds to a specific URL path and can include dynamic segments to handle parameters. When a user navigates to a particular URL, the associated component is rendered, and any dynamic segments in the URL can be used to pass parameters to the component. Pages in Codux do more than just display content – they can fetch data before rendering, handle errors gracefully, and so on.
Important!
At the moment, page functionality in Codux is only relevant to Remix projects.

Navigating Between Pages 

Codux makes navigating your app's pages easy. If you're starting from one of our Remix templates, your pages will already be detected. Just click on a page in the Pages panel to view and edit it, or navigate to a page through the navigation bar on the stage, or while interacting with your app while in Preview mode.
Note: Codux uses the same file structure system as Remix projects. Routes can be created using folders in the app/routes directory, where the folder name determines the route's URL path, and a route.tsx file inside the folder defines the route's content. The folder may contain other files as well, such as style files.

├── routes/
│ ├── _index/
│ │ └── route.tsx
│ ├── about-us/
│ │ ├── route.module.scss
│ │ └── route.tsx
│ └── thank-you/
│ ├── route.module.scss
│ └── route.tsx

When Codux creates and edits pages, it modifies the project files and folders, makes changes directly to this path, and warns you as such when applicable.

Create a New Page 

To create a new page in your app, navigate to the Pages tab, and click Create New Page.
Enter the route for the new page to determine the URL where the page can be accessed. You can create a subpage by adding a slash. For example:
  • /about
  • /products/electronics
When you create a new page, Codux will add a file and folder for that page in the routes directory.
Note:
The homepage of your app is handled differently. It's represented by the root's index/route.tsx file. This file has no specific route settings, as it represents the root URL ("/"). If you remove this file, you'll need to manually create it to define your homepage content. For more details on how Remix handles index routes, refer to the Remix documentation on index routes.

Dynamic Pages 

Dynamic pages use parameters in their URLs. For example, a product page might use the route /products/$productSlug to show a particular product based on the user's selection.
To make a route dynamic, click Add Parameter in the Create New Page and Page Settings dialog. Codux with then add the placeholder /$param to your route which you can then change, as well as a <Loader> within the page file.

Viewing Dynamic Pages 

To view a dynamic page in your app, switch to Preview mode and navigate to it through your app's UI. You can also view a dynamic page by navigating to it from the dynamic page list in the Pages tab as shown here:
From here, search for and select a dynamic page to navigate to it, or click the refresh button to refresh the list (see Defining Dynamic Pages below).
You can also enter the specific dynamic route (including the necessary parameter, like a product ID) directly in the navigation bar on the stage. For example, if you have a dynamic product page with the route /products/$productId, you might enter /products/123 in the navigation bar to view the page for a product with this ID.

Defining Dynamic Pages 

For Codux to know of all the possible dynamic routes for a particular page, use the getStaticRoutes function in your dynamic route file.
Let's take a look at this example:
1
2
3
4
5
6
7
8
// route.tsx
export const getStaticRoutes = async () => {
    const products = await getEcomApi().getAllProducts();  
    if (products.status === 'failure') {
        return [];
    }  
    return products.body.map((product) => `/products/${product.slug}`);
};
This asynchronous function fetches all the store products from the Wix Headless backoffice, and returns an array of strings, where each string is a complete URL path for a product page.

Editing a Page Path 

To change a page, access its settings from the Page Settings icon.
Here you can modify a route, view its code, view in VS Code, and delete a page.
IN THIS ARTICLE
Previous article
Next article