Wasp-lang•3mo ago

multiple features

Hi is it possible to create multiple pages for custom features with this boilerplate? Couldn’t acces internet so trying to figure out through this way. Thanks alot

24 Replies

kapa.ai•3mo ago

Hi @Sven. 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 multiple pages for custom features with Wasp. You can add more pages by creating another set of page and route declarations. Here is an example of how to add a new page:

main.wasp
route HelloRoute { path: "/hello/:name", to: HelloPage }  
page HelloPage {  
 component: import { HelloPage } from "@src/HelloPage"  
}

main.wasp
route HelloRoute { path: "/hello/:name", to: HelloPage }  
page HelloPage {  
 component: import { HelloPage } from "@src/HelloPage"  
}

When a user visits /hello/their-name, Wasp will render the component exported from src/HelloPage.tsx and pass the URL parameter the same way as in React Router:

src/HelloPage.jsx
export const HelloPage = (props) => {  
 return <div>Here's {props.match.params.name}!</div>  
}

src/HelloPage.jsx
export const HelloPage = (props) => {  
 return <div>Here's {props.match.params.name}!</div>  
}

You can visit /hello/johnny and see "Here's johnny!". For more details, you can refer to the Wasp documentation (https://wasp-lang.dev/docs/tutorial/pages#adding-a-second-page). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•3mo ago

Ahhh cool How would i learn more about jsx and tsx to make such pages?

Anddy•3mo ago

The best thing I’ve done is watch YouTube videos. Params can be very powerful when used correctly

SvenOP•3mo ago

Do you have some links

miho•3mo ago

Any React tutorial will be okay, JSX / TSX as keywords help. These tutorials are usually related to using React outside of Wasp so you'll need to slightly adjust what you learn but ever so slightly becauase Wasp is using good old React, and no special syntax. For example: https://www.youtube.com/watch?v=xTVQZ46wc28

Dave Gray

YouTube

React Typescript Tutorial for Beginners

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap In this React Typescript Tutorial for beginners you will learn about function components, passing props, default values, passing setState, and all of the associated TS types and return types. React + Typescript! 🚀 Become a full-stack web dev with Zero To Mastery Course...

SvenOP•3mo ago

alright nice is this boilerpalte suited for like "bigger" projects. Planning on building something big have a good experience in different coding languages and frameworks btw what would be recommended to use JS or TS?

miho•3mo ago

@Vinny (@Wasp) I'll let you answer this bit

SvenOP•3mo ago

alright ill try

miho•3mo ago

TS all the way in my opinion, it's not that harder but gets a lot of benefits by catching potential bugs for you

SvenOP•3mo ago

yeah true object oriented is better too imo how do i install wasp on my windows machine

miho•3mo ago

Have you checked the Wasp docs? https://wasp-lang.dev/docs

Introduction | Wasp

If you are looking for the installation instructions, check out the Quick Start section.

SvenOP•3mo ago

yes but i dont understand the scentence To install Wasp on Linux / OSX / WSL (Windows), open your terminal and run:

miho•3mo ago

Boris wrote this great post on the topic of installing Wasp on Windows (WSL2): https://dev.to/wasp/supercharge-your-windows-development-the-ultimate-guide-to-wsl-195m

DEV Community

Supercharge your Windows Development: The Ultimate Guide to WSL 🚀📟

Hi! I’m Boris! I’m a software engineer working professionally in insurance, teaching other...

SvenOP•3mo ago

but do i need to code in a linux env or something then

miho•3mo ago

Please read the article 🙂 it will clear up things in much better way than I can in a few short messages

Anddy•3mo ago

I agree TS all the way It depends on what you OS you are using. For windows you handle all commands and such in the WSL2 (Windows Subsystem for Linux) environment. But you can still use your normal windows environment for vscode and just navigate to the project

SvenOP•3mo ago

my .wasp file doesnt have like an icon is that correct

Anddy•3mo ago

Did you install the extension?

SvenOP•3mo ago

yep if i dont need speicifc tables like task table i can remove them from prisma file and migrate?

Anddy•3mo ago

mine does yup

SvenOP•3mo ago

@kapa.ai I want to style my app page using chakra, what is the best way of doing this? I want to create an application UI with a sidebar

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To style your app page using Chakra, you can wrap your top-level React component with the ChakraProvider component. This was suggested in a Github issue (https://github.com/wasp-lang/wasp/issues/77) related to Wasp. Here's an example:

function App({ children }) {
  return (
    <ChakraProvider>
      {children}
    </ChakraProvider>
  );
}

function App({ children }) {
  return (
    <ChakraProvider>
      {children}
    </ChakraProvider>
  );
}

In this example, children would be the components of your app. If you want to create a UI with a sidebar, you would include your sidebar component and main content component as children of the App component. Please note that this is a general approach and might need to be adjusted based on your specific needs and the structure of your project. Also, this feature is not yet officially supported in Wasp, but it's being considered for future updates. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

SvenOP•3mo ago

clear

MEE6•3mo ago

Wohooo @Sven, you just became a Waspeteer level 4!

Gaming

Programming

multiple features