Customise openSaaS template
Hello, I am planning to use openSaaS for my new saas. I am trying to understand how much I can customise the template? Can I just import my NodeJs components in it and just show them in a page? Or do I have to reimplement them in Wasp?
2 Replies
Hi @reikgang. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hello! I'd be happy to help you understand how to customize the OpenSaaS template with Wasp.
The OpenSaaS template is designed to be flexible and customizable. You can indeed import your existing Node.js components and use them within the Wasp framework, but you may need to make some adjustments to integrate them properly.
Here are a few key points to consider:
1. Wasp uses React for the frontend, so if your components are already React-based, they should be relatively easy to integrate. If they're pure Node.js backend components, you'll need to adapt them to work with Wasp's server-side structure.
2. Wasp provides a structure for full-stack web applications, connecting the client, server, and database. As mentioned in the Introduction documentation:
"Wasp is using React, Node.js and Prisma under the hood and relies on them to define web components and server queries and actions."
3. You can add your custom JavaScript code to the Wasp project. However, you might need to adjust how you import and use external packages. There's an open issue discussing support for custom npm packages in Wasp projects: Add support for custom npm packages
4. The OpenSaaS template comes with several features pre-built, such as authentication, Stripe payments, and more. You can keep what you need and remove or modify the rest.
5. For UI customization, the OpenSaaS template uses Tailwind CSS. If your existing components use a different styling approach, you might need to adapt them to work with Tailwind or adjust the template's styling setup.
To get started with customizing the OpenSaaS template, I recommend following these steps:
1. Set up the OpenSaaS template using the command provided in the Starter Templates documentation:
2. Familiarize yourself with the Wasp project structure and how it integrates with React and Node.js.
3. Start by adding your custom components to the appropriate directories (e.g.,
src/client for frontend components).
4. Modify the existing pages or create new ones to incorporate your components.
5. Adjust the server-side logic as needed in the src/server directory.
Remember that while you can import and use many of your existing Node.js components, you may need to adapt them to work within the Wasp framework, especially when it comes to data fetching, state management, and routing.
If you encounter specific issues while customizing the template, don't hesitate to ask for more detailed help. The Wasp community is active and supportive, as evidenced by the various Discord support threads in the knowledge sources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @reikgang, 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?Wasp is just glue between React, Node.js and PostgreSQL, I'd recommend reading the docs https://wasp.sh/docs and going through the Wasp tutorial to best understand what is Wasp and how it works https://wasp.sh/docs/tutorial/create
Introduction | Wasp
If you are looking for the installation instructions, check out the Quick Start section.
1. Creating a New Project | Wasp
You'll need to have the latest version of Wasp installed locally to follow this tutorial. If you haven't installed it yet, check out the QuickStart guide!