Awfully stupid question

🙋Get Help
1

I am not even sure what the question is. I understand the concept. REACT javascript builds what normally the theme would do. Right sofar?
I can download for instance F1 from Github.
I expected to get a folder with a theme. Put it into mydomain.nl/wp-content/themes…

How do i get from the download to a working theme on mydomain.nl ?

i’m quite sure i’m missing the point. Can you help me ?
Kind regards, Marco

2

Hi @sales, welcome to the community :wave:!

I’m afraid I would need some more information in order to help, for example:

It’s not clear to me what are you trying to download and to download it from where?

  • What is F1 that you mention?
  • What have you tried so far and where did you get stuck? Can you walk us through the steps in detail?

In order to provide the best possible help as quickly and as efficiently as possible, can you please provide the info suggested here?

The more info you provide about your issue the better. Providing a repo or code-sandbox with your code is especially helpful to find solutions of technical issues with specific code

3

Totally clean Wordpress, permalinks to /%year%/%monthnum%/%postname%/
Demo Content from Wordpress .org

I followed the 30 minute course how-to-create-a-react-theme-in-30-minutes

npx frontity create webwerkplaats
selected mars-theme
(folder webwerkplaats is made)
cd webwerkplaats
npx frontity dev (localhost:3000 opens in browser and a working Test Frontity Blog appears)
Open webwerkplaats/frontity.settings.js
Changed line 45 to 50:
“name”: “@frontity/wp-source”,
“state”: {
“source”: {
api: “http://www.4uwerkplaats.nl/hetautomeisje/wp-json”
}
}
(in my case it said: url: ", not api)

Refreshed localhost:3000 to see all the posts of Automeisje. Works!
Changed the menu in frontity.setting.js so now i even see MY categories. Works!

Appearantly i have a local Wordpress running which loads it’s contents from
4uwerkplaats.nl/hetautomeisje/

Now 4uwerkplaats.nl/hetautomeisje has to use the mars-theme.

I uploaded the folder webwerkplaats/packages/mars-theme to the
www.4uwerkplaats.nl/hetautomeisje/wp-content/themes folder on my server.
In the admin i see not the theme but only “Missing Stylesheet”.

My question therefore would be: i have locally working theme (mars-theme). Now what ? How do get it working (NOT locally)

4

You basically mean, how to point http://www.4uwerkplaats.nl/hetautomeisje/ to localhost:3000

You can’t unless you move your http://www.4uwerkplaats.nl/hetautomeisje wordpress instance to subdomain or other dir.

So don’t try this if you don’t understand:

  1. Move http://www.4uwerkplaats.nl/hetautomeisje/ to http://www.4uwerkplaats.nl/wp-hetautomeisje/
  2. Now change API url to http://www.4uwerkplaats.nl/wp-hetautomeisje/wp-json
  3. Go to your apache/nginx config and point localhost:3000 to http://www.4uwerkplaats.nl/hetautomeisje/


Apache Example:
<VirtualHost *:80>
[…]
Redirect “/” “https://tracker.mydomain.com/”
[…]

<VirtualHost *:443>
[…]
ServerName mydomain.com
ProxyPass /.well-known/ !
ProxyPass / http://127.0.0.1:3000/
ProxyPassReverse / http://127.0.0.1:3000/
ProxyPreserveHost On
[…]

5

Hey @sales

Welcome to Frontity :slight_smile:

That’s right, but I’ll add some clarifications. When using Frontity, your frontend is entirely built in React and it’s isolated from your WordPress installation. Your React application (built with Frontity) will get the content from your WordPress using the REST API.

So you will have two different stacks. Your WordPress as the backend, running on a PHP server that will manage the content and Frontity as the frontend, running on a Node JS server.

This also means that the PHP rendering engine of your WordPress won’t have any functionality.

On Github you have the source code. But in order to use it, you’ll have to download it from npm. F1, or any other Frontity theme, are node packages that is available in npm.

As I mentioned above, when you want to use Frontity, you are creating a whole stack based on React that will take care of your frontend. This stack will run on a Node JS server.

I totally understand your questions and confusion. Frontity themes can’t be installed like regular WordPress themes under the wp-content/themes folder. As I explained above, you are going to use WordPress in a “decoupled/headless” architecture.

The missing point is understanding that with Frontity you are using WordPress as a Decoupled/Headless CMS, only to manage the content and expose it through the REST API. Your frontend is built in a different stack, using only JavaScript.

I hope this clarifies a bit more your ideas about Frontity :slight_smile: