Join the Webstudio community

Updated 3 weeks ago

Migrate from webflow to webstudio and self-host the builder

Hello, I want to migrate from webflow to webstudio and self host the builder, is there a step by step on how to set it up anywhere, maybe a past thread / issue? Couldnt find it by myself
1
e
M
M
86 comments
As in with all the capabilities of the cloud based one possible*, sorry
You can migrate webflow to webstudio by copy and pasting each section not the entire page at once
Then for self hosting I think it's somewhere in the documentation
Mind helping with the self-hosting? I couldn't get the builder to run self-hosted on Linux with devcontainers.
I might not be able to help with this as I don't run the builder on Linux , I use vscode + docker desktop.

However, here's a similar thread on, you can check if it solves your problem
https://discord.com/channels/955905230107738152/1353303593800962048
I setup the builder to be running, but do I have to publish my website before being able to locally export the code through Docker?
No you don't there are different options for exporting your code.. static, vercel , netlify and docker
Do you have webstudio cli installed?
it requires that if I choose the Docker option to have my website published
Oh, now it's giving me errors for some reason
wait I think I know why
fixed that issue, it was basically my Docker containers being not started
Anyways this is what I get when trying to export the project (linking, syncing and building does work normally tho)
nvm it fixed itself for some reason
When I was trying to export the project with npx webstudio@latest it was telling me that it needed to be published
but I suppose that running the:
Plain Text
webstudio link
webstudio sync
webstudio build

commands fixed that issue
@Mikeoxygen when syncing the project, is it possible to edit the code directly such as adding for example a custom React component and then sync it back with the Webstudio project?
I haven't tried it before but I'm assuming that since webstudio uses remix (your website is basically a remix site with components) I am not sure how that would work..... There's only one way to know ๐Ÿ˜„
Was asking because there was this tool Codux which apparently allowed for 2 way syncing between visual design and code, the catch being it wasn't open source and self-hostable
onlook.dev also does that
May I ask what your use case is
well mostly just be able to visually create websites but also have the ability to go inside the code and add any additional functionality if I need it with a 2 way synchronization so that I can go back to visual editing once I add my changes
For codux does it the react components have state or they're mostly simple components
Not sure much bout the tech behind it and how it works tbh
What I want to be able to is basically just self host everything myself and not rely on any specific provider like Vercel let's say
Clutch does that too but it's not open source.... I'm going to export a site and tinker with it and see if it works
I believe you have no issues with self hosting webstudio site right.
Just visual editing
yeah I managed to get it running locally
there was for some reason an issue with the site not being published but it got fixed (as mentioned earlier perhaps by the action of me linking and syncing it)
the only thing which I don't know if it works is if I can have 2 way synchronization
where I can edit the code and it's the source of truth for both when I am coding but also when I am visually editing
I exported my code, chose docker
It generated a remix application
With Clutch, Onlook or Webstudio?
But it says when you edit code you can't publish
but I'm gonna edit something then sync to see if that works
@Oleg Isonen is your guy, let's see if they might put it intheir roadmap
Ohh let me read the conversation
He mentioned something bout components so you may wanna take a look at what I am proposing
yeah Interesting stuff.
Just read the thread
@Mikeoxygen btw when I was setting up webstudio I wanted the docker compose to use a different port so I tried setting PGPORT to 5433 but it gave me an error
i have no idea as i have not tinkered with changing port
mind sharing error you got
it's in the post I linked
have you confrimed you credential username and password for postgres
the application works perfectly fine with port 5432, if I change it with the environmental variable to 5433 then it breaks
that is the only change I did
also when you change the port did you run npx prisma generate
you can try this
nope lemme check
or when you change the port in env stop the container including postgres db and run it again
this error only appears when you change port right?
PGPORT=5433 docker compose up -d
it is asking that I give it a schema
Plain Text
npx prisma generate
Error: Could not find Prisma Schema that is required for this command.
You can either provide it with `--schema` argument,
set it in your `prisma.config.ts`,
set it as `prisma.schema` in your package.json,
or put it into the default location (`./prisma/schema.prisma`, or `./schema.prisma`.
Checked following paths:

schema.prisma: file not found
prisma/schema.prisma: file not found

See also https://pris.ly/d/prisma-schema-location
I don't think it's the problem
stop your container and start again
That's after change the port
Hmm seems to have worked now
perhaps it is because I made a container with port 5432 and then create the container volume, since it's using that, the problems are no longer appearing
@Mikeoxygen can the Database from my docker container volume be migrated to let's say another device.
If you transfer the docker container to another device you have the database as well
you can transfer as a tar file
or expose the port. I use docker desktop so I think it allows to see the database and transfer
Though I haven't not tried
Hmm, interesting I will need to take a look into.

My goal was to use Webstudio as a visual editor for UI components (once they do get added based on the proposition) and even entire pages which then similar to a headless CMS I can integrate into my own applications. And I wanted to be able to share the Webstudio project with others, but since an offline .wstd project file export won't be supported anytime soon this is my best option.
Yeah so I think the visual editor for UI components (Components is on the roadmap, so you will be able to have components just like webflow and others) .

I'm thinking if you want to create components that you want to use in your other application you're better off using other tools ( if that's just what you want to want ) but as you mentioned earlier most of those tools are closed sourced and you can't self host like webstudio.

Check out builder.io it's also a visual editor for components in different frameworks.


As for sharing your wstd project offline what is your forward port sort of ( you should be able to share)
I believe when components are ready there are possibilities for using the components outside webstudio
So component features is a preliminary to what you want...
Yeah its very disappointing that its such a complex process
Wanted to host our own instance on something like vercel
The actual setup (with Docker) should be relatively simple actually (don't know bout Vercel tho)
you just create a folder, sync your webstudio project inside that folder, and then export for hosting
Hosting builder on vercel is hard. Too much configuration and the little things. We don't recommend doing it at the moment. Maybe some day we can figure out a way to simplify.
Add a reply
Sign up and join the conversation on Discord