Frontend React Template integration into OpenSaas template
As someone who has considered web development their kryptonite for the past decade, I can't thank you enough for creating wasp and the OpenSaas template. My background has been using Python and R for data science and HPC, but for some reason, committing to learning a web framework like React or Angular has always been elusive.
Over the years, I have purchased several React web page and dashboard templates but have struggled to customize them quickly. Since I have limited experience with Javascript, Typescript, or React but I now have a wonderful OpenSaas wasp template as a foundation, I was wondering if anybody might be able to provide pointers or links on how I could go about modifying the styling of the OpenSaas template with an existing React web template I have purchased.
I totally realize this request is a bit ambiguous, but at this point, it is hard for me to know where wasp templating code begins and React code ends. Any links or suggestions would be greatly appreciated.
22 Replies
hey @narrowgate. nice to see you made it here.
it sounds like it could be challenging with limited experience.
my advice would be to follow the tutorial on our website first (separate from Open SaaS): https://wasp-lang.dev/docs/tutorial/create
once you feel like you understand React and Wasp, check out tailwind css (that's what Open SaaS uses).
if that's all making sense, then you'd be at a point where you can start integrating your react template into Open SaaS
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!
thanks @Vinny (@Wasp) ... not exactly the answer I was hoping for, but I completely understand. I have been working through the tutorials and they are all excellent. In fact, they are so good and make the framework appear so approachable that it is probably what prompted my moonshot question. I'll keep poking around, learning, and see what I can come up with.
Question about the database, I don't know much about Prisma but do they have an API to populate the database that is preferred or is it possible to just connect to the postgres database itself and insert data?
there is an example of how to seed your database in Open SaaS. the file is here: https://github.com/wasp-lang/open-saas/blob/main/app/src/server/scripts/usersSeed.ts#L6
here's the full documentation on db seeding: https://wasp-lang.dev/docs/data-model/backends#seeding-the-database
Databases | Wasp
Entities, Operations and Automatic CRUD together make a high-level interface for working with your app's data. Still, all that data has to live somewhere, so let's see how Wasp deals with databases.
if you're finding the framework very approachable then it sounds like it shouldn't be too challenging for you to mix in the components from your previous template into Open SaaS. give it a try and let us know if you have more Qs!
Thanks for the database link. I'll play around with this. The example provided shows using a seed function within the Framework, but I'm looking to probably do an insert into a Postgres table via some sort of Airflow/Cron job on a regular basis. Let me see what the DB looks like after following the instructions and see if I can access it with proper credentials.
@narrowgate let us know how it all goes! btw can you share the link to the template you bought? I think in the ideal case it should be as easy as copy/pasting components to your wasp codebase
Thanks so much @matijash ! I was doing some exploring and it certainly looked possible. Let me DM you with a link to the files since it is under license.
The thing I haven't been able to figure out is how to access the postgres tables directly and insert my data. I really would like to avoid the seeding method described in the docs and since its postgres, there has to be a way to do it ... I just haven't found it yet.
Thanks again!
do you mean take data from one postgres instance and copy it to another?
or just manually add a few rows of data to a postgres db?
if you simply want to access your deployed database and add rows etc, you could use sth like Postico: https://eggerapps.at/postico2/
but let us know what exactly you need and we can help to figure it out 🙂
You can also just link to the site where you bought it, I think I'll be able to already see from there what it is
they prob have some example code etc
@matijash Sure ... the templates I was considering were the Pro versions of these two Free links:
- https://www.creative-tim.com/product/blk-design-system-react
- https://www.creative-tim.com/product/black-dashboard-react
My guess is they should be similar.
There is another template I haven't purchased but I'm taking a look at as well. While it is not free, it has a free "relative" which is located here:
https://github.com/primefaces/sakai-react
Would love to hear your thoughts on which would be easiest to integrate.
@Vinny (@Wasp) As for the database ... I'm running nightly jobs in Python that need to update several tables using SQLAlchemy or something like that. I fired up the open saas demo and launched the database and db studio but couldn't figure out how to connect to the database using something like DBeaver. Is there a default user/password that I missed in the documentation?
Wohooo @narrowgate, you just became a Waspeteer level 1!
@narrowgate good questions here!
So, when using Wasp locally (OpenSaas is built with Wasp framework, and db stuff is Wasp specific, so I will be talking about Wasp here), you will normally use a development Postgres database.
You can either set up your own Postgres database locally and just tell your Wasp app how to connect to it, or you can use Wasp's "managed dev db", which really means that Wasp will spin up and run the DB for you, so you don't have to bother with it -> this is done with
wasp start db.
If you go with first option and have set up local Postgres database on your own, then you are the one who konws the credentials to connect to it, which means you can also easily use them with any other tool, like DBeaver which you mentioned.
If you use wasp start db (which is easier and what I would recommend) then Wasp picks the password and username, but it will also print those out for you: actually it will print out the whole connection string that you can use to connect with external tools like DBeaver. It says this very clearly at the top of the output of wasp start db with yellow letters, you can't miss it. So you can use that to connect with DBeaver.
This said, this is all for development.
For your app that you will deploy to production somewhere, you will have to ensure the Postgres database yourself (ok, we do it for you if you deploy to Fly). But in any case, that database is standalone, has its settings, and therefore you can connect any tool to it, including DBeaver, similar like for the first case I explained when in development.
Another idea though: While you can connect directly with extenral tools to the DB and update the data in Postgres db, there is another approach also: creating an API route https://wasp-lang.dev/docs/advanced/apis with Wasp, and then having those external tools send data to that API route. Then, in that API route, you can write that data into the DB. Benefit is you can use Prisma and you get Typescript and therefore compiler will warn you if db schema changes. I would advise this approach. For connecting, you can make up some secret key, and your api route can read it via ENV var and compare it to secret key that callers of the API provides (which will be that same secret key). This is also a plus, becase you are not giving your external tools the credentials for the whole Postgres DB, but only for that one API route -> so limited access. That is also easier to revoke -> if you want, you can change just that API key, not for the whole database. So I would recommend this as an approach!
-----------------------
As for UI templates -> I don't have capacity unfortunately to investigate them, but in general, Wasp doesn't get much into your UI, it is mostly just React and whatever. It does go into routing a bit though. So I can't say for sure, but likely those templates will work with some tweaking. No other way then to try though, and we can help with specific questions if you get stuck.Wow ... thank you so much for taking the time to write such an incredible response!
I totally misssed the user/pass details for postgress on startup. That is fantastic!
At this time, I was NOT planning on deploying to Fly but you all do create a Docker compose file that can be utilized for deployment to other hosting providers via VPS, correct?
Lastly, I was playing around with the simple user/pass login and was getting a 404 error. Any ideas?
We give you Dockerfile for server, while client is static so really easy to deploy, but we give instructions for all of it! So yes, certainly valid to do it that way!
user/pass login 404 -> huh can't really say without more info, but please do share more information, I am sure we can figure it out!
Thanks ... I'm seeing an error when I perform a
wasp start. I think it has to do with the fact that I'm running a local LLM application (Ollama) on port 3000 so vite starts up the application on port 3001 instead.
As a result, I'm getting an error in the terminal:
[nodemon] app crashed - waiting for file changes before starting
Just curious is port 3000 hard-coded into the opensaas app by chance and could this be causing the 404 error?oh yeah that is certainly going to be a problem. Actualyl, what is hardcoded is that server needs port 3001. When you do
wasp start, it runs client and server. Server goes on port 3001, while client is a bit more flexible if I am correct (although it usually aims for 3000).
So what happens is that client goes for 3001 since you already have 3000 occupied, and then server fails because client tooks its 3001 port.
We plan to make this more flexible in the future but didn't get to it yet.
So if you can keep ports 3000 and 3001 free for wasp start, you shoulnd't have this issue (if this indeed is the only issue).Ok ... thanks so much. Will give it a try.
sorry for the wait on this, just gave it a quick look now! Summary:
- the first two ones (from creative-tim) are based on Bootstrap 4 as UI library. Open SaaS comes with Tailwind by default. You could rip out tailwind and use Bootstrap if you founded though. But Bootstrap is a bit "old school" and most people choose tailwind now few new projects.
- the Sakai demo you shared has its custom scss (css preprocessor), so no UI library by default as I could see it. The demo also comes with Next.js app, so there might be some specific Next stuff that you will have to change a bit / ignore when moving it to Open SaaS. You will also have to mix their custom scss with tailwind in Open SaaS which could be a bit bothersome.
Final question: Do you need anything specific from these templates? They all seem kinda dated and not very actively maintained, and use somewhat older technologies. Open SaaS comes with TailAdmin, which is a dashboard component library for Tailwind: https://tailadmin.com/. If that works for you, that would be the smoothest and easiest way, and it works nicest with Open SaaS.
Free Tailwind CSS Admin Dashboard Template - TailAdmin
TailAdmin is a Free and Open Source Tailwind CSS Admin Dashboard Template, provides developers with everything need to create a complete, data-driven back-end, dashboard, or admin panel solution for upcoming web projects.
Oh nice analysis Matija! Yeah, might be better to just roll your own Tailwind, and you can also use GPT4 to help with that
@matijash Thanks so much for the detailed advice and for checking out those templates. Like I mentioned, I am a complete novice when it comes to web development, so I incredibly value the analysis you provided, especially around Tailwind vs other technologies.
I purchased the creative tim templates a couple of years ago and never did anything with them. I'm not surprised they are "dated", but I still like the way they look and feel.
Thanks so much for referencing the TailAdmin Dashboard. I see that the company behind it is Pimjo and they have similar Tailwind templates available here:
https://uideck.com/templates/tag/tailwind/
Just curious, TailAdmin appears to only have the "admin" pages present and not pages for landing page, blog, and other pages for a full site. Again, not knowing much about web dev really at all, what is the relative difficulty of mixing/combining one of the more general SaaS tailwind templates at the link above with the TailAdmin template and incorporating it in the open-saas template with Wasp?
As long as you stick with tailwind thats fine! Btw open saas comes with a landing page and blog 🙂