Defining a Remix App

Tip!
Check out the Remix documentation to learn more about Remix and route configuration.
If you start a project from one of our Remix templates, you'll be able to create, navigate, and manage pages, as well as view the app exactly as it will look when published. If you have an existing Remix project that you want Codux to fully support with these powerful features, you'll need to define your Remix app first.

Getting Started 

The easiest way to begin is by using one of our Remix templates. If you start your app development this way, Codux will automatically detect your app's pages and let you to create new ones without additional setup. For existing Remix projects not started from our template, follow the steps below.

Setting Up a Remix App 

To set up your Remix app for use in Codux:
  1. Open a terminal and install the required @wixc3/define-remix-app package using your preferred package manager. For example: npm install @wixc3/define-remix-app, yarn add @wixc3/define-remix-app, pnpm add @wixc3/define-remix-app, etc.
  2. Verify the installation by checking that @wixc3/define-remix-app is listed in your package.json under dependencies.
  3. Create a new configuration file in your project (you can download one from one of our templates here). Use any filename with the suffix .app-def.tsx. For example:
1
2
3
4
5
6
7
// app.app-def.tsx

import defineRemixApp from '@wixc3/define-remix-app';  
export default defineRemixApp({
  appPath: './app', // the root directory of the routes
  routingPattern: 'folder(route)', // see the section below
});

appPath 

In Remix, the app/routes directory is where routes are defined. Codux creates new pages in this folder. Point to the app path, relative to the .app-def.tsx definition file created in step 3 above.

routingPattern 

Codux supports three routing patterns in Remix projects. Use the routingPattern configuration to set how your routes are structured in your project.

file 

File-based routing, where the /routes directory contains all the pages in the application. For example:

├── app
│ ├── routes
│ │ ├── blog.tsx
│ │ ├── about.tsx

folder(index) 

Folder-based routing, where each folder (route) is defined by an index.tsx file. For example:

├── app
│ ├── routes
│ │ ├── blog
│ │ │ ├── index.tsx
│ │ ├── about
│ │ │ ├── index.tsx

folder(route) 

Folder-based routing, where each folder (route) is defined by a route.tsx file. For example:

├── app
│ ├── routes
│ │ ├── blog
│ │ │ ├── route.tsx
│ │ ├── about
│ │ │ ├── route.tsx

Refer to Remix Route File Naming documentation for more information.

Limitations and Considerations  

There are some things to keep in mind when working on Remix apps in Codux at this time:
  • Remix Support: Codux currently exclusively supports Remix applications. Other frameworks are not compatible yet.
  • Wix Services Integration: After completing the above steps (adding our package and creating the configuration), you can begin the integration work to connect Wix services to your app.
  • Development Environment: While Codux aims to provide a seamless development experience, there may be some edge cases where there are differences between the local development environment and the production environment, particularly when it comes to server-side code execution. Let us know what you experience and any gaps you see – reach out to us on Discord or through our contact page.
IN THIS ARTICLE
Previous article
Next article