Dynamic Route

In Nextjs you can have a route such as api/someName/[action].ts and action is dynamic. Is this possible with Wasp?

14 Replies

Hi @amianthus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to create dynamic routes in Wasp. However, Wasp currently only supports top-level routing. For nested or more complex routing, you can use React Router within your Wasp application. Here is an example from the Wasp tutorial on how to add a second page with a dynamic route:

pages: {
  Main: {
    component: { file: "Main.js" },
    routes: [{ path: "/", exact: true }],
  },
  Todo: {
    component: { file: "Todo.js" },
    routes: [{ path: "/todo/:id" }],
  },
}

pages: {
  Main: {
    component: { file: "Main.js" },
    routes: [{ path: "/", exact: true }],
  },
  Todo: {
    component: { file: "Todo.js" },
    routes: [{ path: "/todo/:id" }],
  },
}

In this example, :id is a dynamic route parameter. When you navigate to /todo/1, the Todo component will be rendered and 1 will be passed as a prop to the component. For more complex routing scenarios, you can use React Router within your Wasp application. Here is an example of how you might do this:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/someName/:action" component={SomeComponent} />
      </Switch>
    </Router>
  );
}

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/someName/:action" component={SomeComponent} />
      </Switch>
    </Router>
  );
}

In this example, :action is a dynamic route parameter. When you navigate to /someName/foo, the SomeComponent component will be rendered and foo will be passed as a prop to the component. For more information, you can refer to the Wasp tutorial (https://wasp-lang.dev/docs/tutorial/pages#adding-a-second-page) and the React Router documentation (https://reactrouter.com/). Please note that Wasp is actively being developed and features like typed route parameters are being considered for future versions. You can follow the progress on this Github issue (https://github.com/wasp-lang/wasp/issues/262). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @amianthus, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

amianthus•2mo ago

@kapa.ai are you sure theres nothing i can add to

route DashboardRoute { path: "/dashboard", to: Dashboard }
page Dashboard {
  component: import Dashboard from "@src/dashboard/Dashboard"
}

route DashboardRoute { path: "/dashboard", to: Dashboard }
page Dashboard {
  component: import Dashboard from "@src/dashboard/Dashboard"
}

to get this feature in?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the current state of Wasp, it doesn't support dynamic routes directly in the DSL. The routing system in Wasp is currently very basic and only supports top-level routes without parameters. However, you can use React Router within your Wasp application to achieve dynamic routing. You would need to implement this within your Dashboard component. Here's an example of how you might do this:

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function Dashboard() {
  return (
    <Router>
      <Switch>
        <Route path="/dashboard/:action" component={SomeComponent} />
      </Switch>
    </Router>
  );
}

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function Dashboard() {
  return (
    <Router>
      <Switch>
        <Route path="/dashboard/:action" component={SomeComponent} />
      </Switch>
    </Router>
  );
}

In this example, :action is a dynamic route parameter. When you navigate to /dashboard/foo, the SomeComponent component will be rendered and foo will be passed as a prop to the component. For more information, you can refer to the React Router documentation (https://reactrouter.com/). Please note that Wasp is actively being developed and features like typed route parameters are being considered for future versions. You can follow the progress on this Github issue (https://github.com/wasp-lang/wasp/issues/262). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @amianthus, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

amianthus•2mo ago

😔 @kapa.ai how do i create an API route using wasp?

MEE6•2mo ago

Wohooo @amianthus, you just became a Waspeteer level 1!

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Creating an API route in Wasp involves two main steps: declaring the API in Wasp and defining the API's NodeJS implementation. Here's how you can do it: 1. Declare the API in Wasp You can declare the API in your Wasp file using the api declaration. Here's an example:

api fooBar {  
 fn: import { fooBar } from "@src/apis",  
 httpRoute: (GET, "/foo/bar")  
}

api fooBar {  
 fn: import { fooBar } from "@src/apis",  
 httpRoute: (GET, "/foo/bar")  
}

In this example, fooBar is the name of the API, fn is the import statement of the API's NodeJS implementation, and httpRoute is the HTTP method and path pair. 2. Define the API's NodeJS Implementation The API should be implemented as a NodeJS function that takes three arguments: req (Express Request object), res (Express Response object), and context (an additional context object injected into the API by Wasp). Here's an example:

export const fooBar = (req, res, context) => {  
 res.set("Access-Control-Allow-Origin", "*"); // Example of modifying headers to override Wasp default CORS middleware.  
 res.json({ msg: `Hello, ${context.user ? "registered user" : "stranger"}!` });  
};

export const fooBar = (req, res, context) => {  
 res.set("Access-Control-Allow-Origin", "*"); // Example of modifying headers to override Wasp default CORS middleware.  
 res.json({ msg: `Hello, ${context.user ? "registered user" : "stranger"}!` });  
};

In this example, fooBar is the name of the function that implements the API. It sends a JSON response with a message that depends on whether the user is registered or not. After completing these steps, you'll be able to call the API from the client code (via Wasp's Axios wrapper), or from the outside world. For more information, you can refer to the Wasp documentation on APIs (https://wasp-lang.dev/docs/advanced/apis). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @amianthus, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

amianthus•2mo ago

@kapa.ai how can i use the express-fileupload middleware with wasp?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use the express-fileupload middleware with Wasp, you would need to configure it in your server setup. Here's how you can do it: 1. Install the express-fileupload package First, you need to install the express-fileupload package. You can do this by running the following command in your terminal:

npm install express-fileupload

npm install express-fileupload

2. Configure the middleware Next, you need to configure the middleware in your server setup. You can do this by creating a serverSetup.js file in the ext directory of your Wasp project and adding the following code:

import fileUpload from 'express-fileupload';

export const serverSetup = ({ app }) => {
  app.use(fileUpload());
};

import fileUpload from 'express-fileupload';

export const serverSetup = ({ app }) => {
  app.use(fileUpload());
};

In this code, fileUpload() is a function that returns the express-fileupload middleware. 3. Declare the server setup in Wasp Finally, you need to declare the server setup in your Wasp file. You can do this by adding the following code:

serverSetup: import { serverSetup } from "@ext/serverSetup.js"

serverSetup: import { serverSetup } from "@ext/serverSetup.js"

After completing these steps, you'll be able to use the express-fileupload middleware in your Wasp project. For more information, you can refer to the Wasp documentation on server configuration (https://wasp-lang.dev/docs/project/server-config) and the express-fileupload documentation (https://www.npmjs.com/package/express-fileupload). Please note that this is a general guide and might need to be adjusted based on your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @amianthus, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

amianthus•2mo ago

@kapa.ai Im using typescript

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you're using TypeScript, the process is very similar. Here's how you can configure the express-fileupload middleware with TypeScript: 1. Install the express-fileupload package First, you need to install the express-fileupload package. You can do this by running the following command in your terminal:

npm install express-fileupload

npm install express-fileupload

You might also need to install the TypeScript definitions for Express and express-fileupload:

npm install @types/express @types/express-fileupload

npm install @types/express @types/express-fileupload

2. Configure the middleware Next, you need to configure the middleware in your server setup. You can do this by creating a serverSetup.ts file in the ext directory of your Wasp project and adding the following code:

import fileUpload from 'express-fileupload';
import { Application } from 'express';

export const serverSetup = ({ app }: { app: Application }) => {
  app.use(fileUpload());
};

import fileUpload from 'express-fileupload';
import { Application } from 'express';

export const serverSetup = ({ app }: { app: Application }) => {
  app.use(fileUpload());
};

serverSetup: import { serverSetup } from "@ext/serverSetup.ts"

serverSetup: import { serverSetup } from "@ext/serverSetup.ts"

amianthus•2mo ago

@kapa.ai where exactly does "serverSetup: import { serverSetup } from "@ext/serverSetup.js"" go in the main.wasp file?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The serverSetup import statement should be placed inside the app declaration in your main.wasp file. Here's an example:

app MyApp {
  title: "My app",
  // ...
  server: {
    setupFn: import { serverSetup } from "@ext/serverSetup.js"
  }
}

app MyApp {
  title: "My app",
  // ...
  server: {
    setupFn: import { serverSetup } from "@ext/serverSetup.js"
  }
}

In this example, MyApp is the name of your application, and serverSetup is the function that sets up your server. This function is imported from the serverSetup.js file in the ext directory of your Wasp project. For more information, you can refer to the Wasp documentation on server configuration (https://wasp-lang.dev/docs/project/server-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @amianthus, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•2mo ago

Wasp client routes support React Router syntax i.e. you can have dynamic parts of the route specified 😄

amianthus•2mo ago

😭 i did a few dodgy workarounds but ill be sure to try that

Gaming

Programming

Dynamic Route