Creating Frontend w/ Frontity and testing on localhost with MAMP

🙋Get Help
1

Hello Frontity Community!!!
I am very new with using frontity and just installed the npx package with mars theme, currently reading the docs and getting familiar with the frontity environment.

is it possible to connect frontity into a localhost WordPress with using MAMP to access localhost WP Dashboard?

I am used to using MAMP with apache, myphp developing themes with WordPress.
I really like the idea of not using .php with Frontity, but im curious if I could link the WP localhost dashboard using MAMP with frontity to design and develop a theme. can anyone explain and shed a light with this?

I really appreciate you!

2

Hi, you can set your local installation of WP as the data source.

Update frontity.settings.js:

img_local-frontity

This will pull the data from your local site.

Note: you will need to handle this via environmental variables if you decide to deploy the Frontity theme to production, otherwise it will still link to your local when deployed.

1 Like
3

Woah! i just made it work! I set the api to http://localhost:8888/wp/wp-json since my MAMP is set to localhost:8000. This is HUGE!

As I read through frontity docs, you can add more themes on frontity’s packages folder.
Is it possible to add the frontity theme for example the mars-theme to wp-admin/theme?

image
image1459Ă—851 138 KB

also, based on the mars-theme, the menu items/navigation items are stored in frontity.settings.js. is it possible to include a react-router-dom or even create a full react app and add it as a frontity theme?

4

As I read through frontity docs, you can add more themes on frontity’s packages folder.

I don’t think you can make your Frontity theme show up in the WP dashboard. Frontity theme lives on a completely different server and makes the theme decoupled from WP.

is it possible to include a react-router-dom or even create a full react app and add it as a frontity theme?

I haven’t tried to include react-router to Frontity. Have a look at the build in router. It does make sure that all slugs from your Wordpress are available as routes in Frontity.

6

I haven’t tried to include react-router to Frontity. Have a look at the build in router. It does make sure that all slugs from your Wordpress are available as routes in Frontity.

with the builtin router,@frontity/tiny-router, is it possible to make the menu items dynamic as if when you add/remove/edit/delete a new page, it will show up dynamically on Frontity’s localhost:3000?

8

I don’t know if this can be done out of the box. You might need to add an endpoint that returns the menu items for a specific menu.

Hope that helps or maybe the Frontity team can chip in their advice.

9

Peter, thank you so much for your help!

Another Question: What if I have created multiple themes under my packages folder, which will be set into their individual domains? what would be the best approach to handle that?

or,I guess I am asking if is it possible to designate a custom theme(s) into individual domain/site?

1 Like
10

Also, what if I have of couple of custom favicon.ico on different themes? is it possible to have different favicons set on themes for one Frontity project?

11

Hi @sottrj, welcome to the community!

Frontity delegates the logic in packages, so each package is responsible of a specific task. @frontity/tiny-router is the package in charge of managing the routes in a Frontity project (in the client side)

Regarding the menus, as long as you have the info of the menus in the REST API you should be able to read that information dynamically from your Frontity App and generate a custom menĂş based on that data.

Here you have some related threads:

What you can do is define multiple sites under the same Frontity project. In this way you can assign different themes to different sites

12

i’ve tried http://localhost/wp-json and http://localhost/wp/wp-json and none of them work and i’ve copied the url for localhost directly from my web browser.
MAMP settings are apache port 80, nginx port 80, mysql port 8889.

Its been a number of years since i’ve used MAMP so I wouldn’t be surprised if i’m missing something obvious.

13

Hi,

In your frontity.settings.js you don’t have to add anything to the URL, just add the base URL of your wordpress like http://localhost:3000

Frontity does not need to “speak” with MAMP or anything else directly, it just needs your wordpress URL and Frontity does the rest for you.

Once that’s done your entire WP rest api will be in the state (just type frontity.state.source in your console)

14

I tried this and it doesn’t seem to be working. I copied and pasted the url from the wordpress site http://localhost/ directly from my browser. Does frontity have to be in the wordpress theme folder? is that what i’m missing?

15

No you have to understand that Wordpress and Frontity are 2 differents entities ,they don’t need each other to work.In fact Frontity does not care how you run your wordpress since it only works with rest api. I’ve worked on few Frontity projects without even knowing how wordpress is configured on the server side or if it was running mamp, wamp or whatever.

Frontity needs your wordpress url mostly to retrieve data from the wp rest api and that’s how they communicate.
What exactly is going on ? Does Frontity throw an error ? If not what’s happening ? The base url of your Wp is localhost ?

17

Update: I figured it out. it was a silly mistake on my part. I had renamed the folder for frontity and I didn’t refresh my code editor so while I was sitting there making changes to the file it wasn’t actually changing anything. I reloaded my editor and made the change and it works perfectly fine.