How to create url or route like mysite.com/about using corejs

1

I would like to create a mobile site that can be viewed on browsers, (not mobile app) but looks like Mobile App ui.

so the question is how to create route like

mysite.com/about
mysite.com/setting

without using frameworks like react or vue. just corejs or pure js if needed

1 Like
2

Hi,

You will need to make following changes to your F7 core app, so that all its routes can be accessed by directly entering the url in browser address bar.

1. Set Base URL in index.html

Open index.html and add <base href="ROOT_DIRECTORY_OF_YOUR_HOSTED_F7_PROJECT" /> element in the <head>

Suppose your project path is /htdocs/myproject/ , then you must set <base href="/myproject/" />. If your project is located in root directory then set <base href="." />

2. Set Following Parameters While Initializing F7 Main View

browserHistory: true,
browserHistoryRoot: $('base').attr('href').slice(0, -1),
browserHistorySeparator: ''

Check this link: View / Router | Framework7 Documentation

3. Configure You Web Server to Redirect All Requests to index.html

Below code is for Apache Web Server

Create .htaccess file and add following code to it

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+?/?)+$ ./index.html

That’s all you need to do to make your F7 core app accessible using pretty URLs.

Let me know if you face any issues.

Thanks

1 Like
3

OMg! it worked! :open_mouth: ive been looking for this for a long time huhuhu
thank you so much… but there is just a slight problem . im using tabbed template… and the problem is… the tab is not active when i clicked catalog or setting. the highlist stays only on home button. how to tweak this. please see attacjed. I really appreciate it. it is means a lot to me.

ewqe
ewqe1184×990 82.6 KB

4

Glad to know that it worked :slight_smile:

Could you please host your project on a live server and provide me the url? I will need to check how you have structured the tabbed views in your app. This would help me to provide you the solution.

Thanks

5

you visit here in my test folder:
Male Specimen Coverage

6

Hi,

I have checked the structure of your app shell, ie, index.html. At present you’re using multi-views layout, ie, each tab acts as a separate view which includes main view as well. But according to F7 official docs, pushState (browser history, pretty urls) works only for the main view. Therefore we will need to re-structure the layout of the app such that we will use single view layout along with the routable tabs. This will solve your issue.

If you agree, let me know, so that I can rewrite the code structure for you.

Meanwhile you can check my project here, and see how I have structured my app Nectar - Mobile Web App Kit

Thanks

7

hmm… I see. changing the layout structure would be a huge adjustment for me. I dont really follow much on the official doc. as long as it is working, that is fine with me. in fact, all the codes are happening in app.js i dont use the typescript style of coding. just really an old school jquery-ish style of coding.

here is the updates of the page → Male Specimen Coverage

and the workround for the tab is this:

$(‘.tab-link-feeds’).on(‘click’, function() {
$(‘.tab-link-feeds’).addClass(‘tab-link-active’);
$(‘.tab-link-candidates’).removeClass(‘tab-link-active’);
$(‘.tab-link-vote’).removeClass(‘tab-link-active’);
$(‘.tab-link-play’).removeClass(‘tab-link-active’);
$(‘.tab-link-more’).removeClass(‘tab-link-active’);
});

and it works well. although i know, it is NOT ideal.

what really important for me it the “pretty url”
which i really thank you for.

if you want to restructure code, i dont mind, i will be grateful. Hope it’s free coz i see your selling nectar ui. hahaha.

speaking of nectar, it’s cool. i love it! :smiley:

8

Good to know that you have come up with the workaround.

I checked your app in the JS console and found that all your pages are opening in the main view only, making other views useless. It would be better if you use routable tabs instead of multiple views for your use case (ie, pretty urls).

You won’t have to make huge adjustments for that. It only requires a minor change in routes.js (for loading routes in routable tabs) and a small change in index.html. Other than that everything will be as it is.

And of course, I will do it for FREE :slight_smile: I will be very happy to help you.

9

awww thank you so much! id be so grateful. Yeah, im not gonna lie, other views became useless. but im afraid that if i remove other views, the site might not gonna work. i dont have full understanding of concept of pages and views. my one brain cell cant handle it hahaha.

OK, let’s try that’s minor changes that you are suggesting. ill do my best to study it.
im not an expert haha… just a know-how person XD