I've set up af headless WP with a ReactJS frontend. My idea is to use the WP backend to store and manage content that users create. I want people to be able to sign up and login to my site, and create their own content. But my problem is, that I need a guide/tutorial how to do is. Should I use the JWT authentication plugin and how do I create users (does not have to be WP users)?
Any ideas?
Thanks Kasper
First you must create WordPress users as the WordPress code checks the capabilities of the current user to allow write access to its data. WordPress supports a REST API that allows front end JavaScript to access its data. It by default uses cookie authentication to control access. However, there are actions/filters so you can implement your own authentication. If you use the default cookie authentication then you can use the WordPress login facilities to handle authentication. The supported JavaScript client is a Backbone client. I don't know if that will work well with ReactJS (I don't know ReactJS) so you may need to some work with the front-end client side.
Incidentally, the WordPress Calypso project uses a ReactJS frontend to access the WordPress backend. I don't know this project so I don't have an opinion. My feeling is that WordPress decided on Backbone before ReactJS became well known but ReactJS is actually much better so they have the Calypso project. You can read that code to get ideas.
Related
I tried to use one plugin called "WP Data Sync". I am also going through its documentation/ support for the same. I am also having wpbakery page builder in my website. So is there any way that we sync with that also?
Note - We have to sync data in the form of images, image gallery, events listing, and the blog posts.
Did you check out WP Data Syncs website at https://wpdatasync.com/ and create an account to check out an API key?
I'm not sure about all APIs, but the ones I've used in the past would require me to register with the API's website, get issued an API key and maybe even designate the key to a specific website (your WordPress site in this case) for security reasons. After that, you would then go to your WP site and setup the API there via WP DataSyncs plugin.
I hope I understood your question and that this helps.
I am new to web development and and would like advice about what is the usual best practices to achieve what I am trying to do.
I am in charge of writing a frontend app using Vue. This frontend will require a login to access the app. The app will be hosted on Amazon.
However we are also wanting to build an eCommerce site in Wordpress or equivalent that sits on the root of the website, (eg www.mywebsite.com) with the app accessible through a "sign in" button. If the user presses the sign in button we want the location bar location to not change from the website they are on (www.mywebsite.com), even though the Wordpress site and Vue frontend may be stored on different locations/domains.
If the site is made in Wordpress, we can get another developer to do that webpage for us, while I work on the frontend. However we want the experience to be relatively seamless between connecting to the wordpress root site, clicking on the sign in button and being taken to the Vue frontend.
Is this possible? Do both sites have to be hosted on the same server for it to work (eg an Amazon EC2 server which hosts two webpages, the wordpress one and the vue one)?
Or can the wordpress put a link to the Vue frontend which doesn't change the web location to the user?
Or (worst case scenario) do we need to make both webpages in Vue as one Vue application, some pages requiring login to access and others not?
Thanks kindly for any assistance.
So in order to use Vue and WordPress together, you can either write 2 separate applications. One for the Frontend and one for the Backend, which is perfectly fine or you can simply write a WordPress Application with a Vue Theme.
This is how this could look like:
WordPress Backend
You can use a normal WordPress backend, where you can build the architecture you want to. In addition, you need to set up the REST-API Wordpress provides. So this also means, just use plugins which support it. Otherwise, you would need to write custom endpoints. For example, Woocommerce would be a good e-commerce plugin, since it supports the API.
Learn more about it here: https://v2.wp-api.org/
Of course, you can host your WordPress installation on Amazon. Here is a good guide for that: https://aws.amazon.com/de/getting-started/tutorials/launch-a-wordpress-website/
Notice: The REST-API is available in core since 4.7. If you are using an older version you would need to install a plugin.
WordPress Frontend
In order to create your Frontend, I'd recommend you to make a custom theme. Since you are just serving static files this can be done pretty easy. But still, you don't need to reinvent the wheel.
There's a really good starter theme out there: https://github.com/EvanAgee/vuejs-wordpress-theme-starter
It comes with all the stuff you need to get started and since it is just a theme, you can simply set up a usual WordPress hosting without handling Domains of multiple applications.
In order to get the data from the Backend, you would simply make calls to the REST-API. Here's an example: https://github.com/EvanAgee/vuejs-wordpress-theme-starter/blob/master/src/api/index.js
I am trying to secure some pages behind firebase auth -however every time I try open them - I seem to be able to browse to them. Even when I follow the documentation.
I can't seem to find anyway to restrict the page to be accessible only to authorized users.
Any idea how best to approach this?
Edit: Looks like its not supported directly without building a lot of custom code. It would be brilliant if they can support a simple htaccess file or similar. - Here is a link to post feature request
https://firebase.google.com/support/contact/bugs-features/
All static content (HTML, CSS, JS, and other files) published to Firebase Hosting is publicly accessible if you know the URL. There are no authentication controls you can easily configure to change this behavior.
If you need to protect content, you could set up some code via Cloud Functions that checks the user's authentication and serves the content based on its decision.
I suggest saving needed secret part of HTML/JS in Firestore with security rules and dynamically upload it to page after auth.
I am trying to secure some pages behind firebase auth -however every time I try open them - I seem to be able to browse to them. Even when I follow the documentation.
I can't seem to find anyway to restrict the page to be accessible only to authorized users.
Any idea how best to approach this?
Edit: Looks like its not supported directly without building a lot of custom code. It would be brilliant if they can support a simple htaccess file or similar. - Here is a link to post feature request
https://firebase.google.com/support/contact/bugs-features/
All static content (HTML, CSS, JS, and other files) published to Firebase Hosting is publicly accessible if you know the URL. There are no authentication controls you can easily configure to change this behavior.
If you need to protect content, you could set up some code via Cloud Functions that checks the user's authentication and serves the content based on its decision.
I suggest saving needed secret part of HTML/JS in Firestore with security rules and dynamically upload it to page after auth.
I would like to build Single Page Web Application (SPA) with React.js.
Application would need some Content Management System for back-end. I was thinking to use WordPress and their REST-API's but I don't know how to retrieve data from my wordpress installation.
Back-end and front-end would be in different domains so just building WP theme with React.js wouldn't work.
Basically, I don't know how to call and populate data from wordpress to my front-end.
I would need someone to point me to the right direction. And, maybe recommend easier CMS to use in this task.
Actually it is very easy to access your WordPress website data through HTTP REST API
Here you have the full documentation on WordPress REST APi
http://v2.wp-api.org/