Hi all! Is it possible to use Framework7 within Wappler as a normal web page? If possible, I would like to implement SSR and define routes for all the URLs.
The reason is to be able to benefit from SEO.
This the answer I get from Chat with Bing AI
Certainly! Let’s break down your requirements:
-
Using Framework7 with Wappler:
- Framework7 is a popular mobile app development framework that provides a rich set of UI components and tools for building mobile applications.
- Wappler, on the other hand, is a web development platform that allows you to create web and mobile applications using visual tools and code.
- While Framework7 is primarily designed for mobile apps, you can still use it within Wappler for web pages. However, keep in mind that some components may need adaptation for the web context.
-
Server-Side Rendering (SSR):
- SSR is essential for improving SEO and ensuring that search engines can properly index your content.
- With SSR, the server generates the complete HTML content for each page, which is beneficial for search engine crawlers.
- In Wappler, you can achieve SSR by using NodeJS and EJS (Embedded JavaScript templates) as the template engine.
- Here’s how you can approach SSR in Wappler:
- Define your routes and create server actions that fetch data from your database or other sources.
- Use EJS templates to dynamically generate HTML on the server side.
- Ensure that metadata (such as title, description, and Open Graph tags) is also generated on the server.
-
Defining Routes for URLs:
- Wappler provides a visual way to define routes for your application.
- You can set up routes in the Routing Panel, where you specify the URL paths and associate them with specific views or components.
- By defining routes, you can create Single Page Applications (SPAs) and improve the overall user experience.
- Additionally, proper URL rewriting ensures that search engines can crawl and index your pages effectively⁴.
-
SEO Benefits:
- Implementing SSR and defining routes will significantly enhance your website’s SEO:
- Crawlability: Search engines can easily crawl and understand your content when it’s rendered on the server side.
- Indexability: Properly indexed pages lead to better visibility in search results.
- Page Load Speed: SSR reduces the initial load time for users, positively impacting SEO.
- Rich Snippets: Accurate metadata and structured data improve how your content appears in search results.
- Implementing SSR and defining routes will significantly enhance your website’s SEO:
In summary, yes, you can use Framework7 within Wappler for web pages. Implement SSR, define routes, and pay attention to SEO best practices. If you need more guidance, Wappler’s documentation provides tutorials on SSR with NodeJS and using Server Connect data for server-side rendering¹³. Happy coding! 
Source: Conversation with Bing, 15/02/2024
(1) SEO and Optimal Google Ranking, Made Easy with Wappler Routing. https://medium.com/wappler-io/seo-and-optimal-google-ranking-made-easy-with-wappler-routing-6cc66067277c.
(2) Server Side Rendering (SSR) NodeJS and SEO concerns - Wappler Community. Server Side Rendering (SSR) NodeJS and SEO concerns.
(3) Wappler Documentation - About the Routing and URL Rewrite category. https://docs.wappler.io/t/about-the-routing-and-url-rewrite-category/6578.
(4) Routes | Framework7 Documentation. https://framework7.io/docs/routes.
1 Like
Hello!
Yes, it is possible.
Create a project with server model: none
Remove bootstrap, and select Framework7.
You can take a look at this:
https://blog.framework7.io/framework7-next-js-server-side-rendering-yes
Maybe this can help
A friendly advice:
I remember having trouble with how Wappler handles F7 as a WebApp.
For example, if you have this link:
You won’t be able to set actions, so you need to change this:
<a href="">Your link title</a>
To this
<a href="#" class="link panel-open">Your link title</a>
And then:
Comparing it with a mobile project gave me a lot of solutions.
Also, the docs of F7 are great!