Import website from Webflow and build custom CMS with Wappler

Wappler General
#1

Hello Wapplers :slight_smile: ,

my story in a nutshell:

I prefer to work visually and make mockups an collaborate with a client in Figma.com

After finally getting the approval on the design I start development process in Webflow.com

Figma has a Code tab so it’s pretty easy to recreate the design in Webflow ( Figma open on the left monitor screen and Webflow on the right one :wink: )

Also Webflow has the best tutorials at https://university.webflow.com/ so you can do pretty much everything alone.

Really wish Wappler will have something similar in the future.

Then when the website is done I use code export feature as Webflow hosting is pricey and with free CDN hosting like github pages it’s really a no brainer.

So for my static sites needs I have really good tools but now I would like to learn how to create a simple custom cms for that site .

Webflow has a cool editor and I would like to achieve something similar.

I imagine client can login to backend, sees the list of the posts and can just create a new blog post (just title) and then go to front end and do on-page editing of the content.

Is it possible to create something similar with Wappler ?
Can anyone mentor me on how to do it ? and which license do I need ?

I figured out how to import exported code from Webflow
>> sample code export

I opened file manager in Wrappler and just found the index.html file in the exported files and Wappler just imported everything and opened website in Editor - so pretty cool :wink:

Now I understand I need to click Framework and add App Connect so I can start building CMS features over the imported design files ?

But what next ?

Is here anybody who would like to be hired as a mentor in this process ?

Thanks,
Ari

Weblow to Wappler Wannabee
#2

Hi Ari.
I too was using Webflow and have started to explore Wappler from past 2 months.

Biggest obstacle - documentation. Wappler is a rapidly developing platform with new features and updates every week/biweekly. Read this - The Wappler's philosophy. So its difficult to find documentation for everything Wappler can do or what can be done in Wappler.
But, the good thing is that the community here is very-very active and helpful. And you can find many things in posts, even if not officially documented. And sometimes DMXzone docs help too.

Second obstacle - do you code? Webflow is a visual platform, focused on front end design. Wappler does both front-end and back-end. Visually. So, without hacking your way through CSS (and occasional JS), you cannot design a front-end as good & easily as Webflow, as of now.
And as for back-end, well, there’s nothing like it that I have used before. You do need to have a basic understanding of how databases/SQL works, and ASP/PHP whatever programming language you choose.

There are various tutorial videos around YouTube to get you started. I referred https://www.learnwappler.com when I started.

Now, as for the main question: importing from Webflow and building CMS in Wappler. I tried it too. Does it work? TL;DR - Mostly YES. :smile:
Wappler’s visual UI understands HTML tags & bootstrap classes. So, the structure shown in design view is dependent on that. You will have to modify certain tags/elements, replace them with Wappler’s App Connect & Bootstrap components to get it right.
It will take time to adjust to the Bootstrap way (at least I had to cause of no prior experience), but at the end, its all worth it.
The amount of time you will save with back-end once you get accustomed, will blow your mind :exploding_head:. I am still at a very beginner stage, but I am very impressed with how front-end & back-end work visually to create pages easily.
To sum it up, building your CMS over Webflow imported website is very much possible, but you will have to modify it as per Bootstrap to make something functional and make use of the visual tools Wappler provides. If you have any prior Bootstrap or Dreamweaver/DMX experience, it would be very helpful. Else, it will just take a bit more time, as it did in my case.

The level of Webflow’s front-end designer is still afar in Wappler, but the overall visual development makes up for it. And with every update, the designer gets refined.

4 Likes
#3

Hello Nishkarsh :slight_smile:
no I don’t code (yet) I know just basics of html/css and I create stuff visually.

That’s why I am looking to for a set of tools that will help me make my work “alive” online and preferable in the best technology with a future. Hence my interest in progressive web apps.

Regarding Webflow did you used tools like this
https://github.com/samliew/webflow-bootstrap
before you work on the project in Wappler later ?

#4

@Ari,
remember to give a look to the videos in DMXzone.com. There are a lot of videos of same extensions are in Wappler and help you to be inside the logic of Wappler.

Without coding and just basic knowledge of how to organize a DB I made my site with two reserved areas, authentication, extraction of data and send it by mail as CSV file etc.

Sometimes things are easier than appear…

#5

Ari, you will need to learn about programming basics at least, to understand how Wappler works on the server-side things, and setup your database. You can learn more over time.
PWAs are great. Wappler does not have any visual tools for setting up service workers, but its not very difficult to do by yourself. You might have referred https://www.pwabuilder.com/ for PWAs. I haven’t made a PWA using Wappler yet, but plan to do so.

As for the webflow-to-bootstrap generator, I haven’t seen this before. From the JS code, it looks like it will render the page with Bootstrap classes, but I don’t think Wappler’s UI will recognise it as a bootstrap project.

1 Like