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
Related
Suppose I want to add some Wordpress plugins (e.g. Easy Appointment) to a few static web sites that do not run on Wordpress. Currently, I want to add just basic plugin features (appointment form and calendar) to my sites. In future, I would like also to add plugins for email notification, payments, etc.
My sites consist of a few HTML and JS files. I will probably need to use some cloud database or CMS but I don't want to move the sites to Wordpress. What is the best way to integrate Wordpress plugins with these static web sites ?
You Can't Do That™.
Without WordPress there's nothing to run your WordPress plugin code: no php, no way to load it, no way to invoke its features. And there's no database to hold your data (both appointment forms and calendars are data-intensive applications.)
Could some sort of headless WordPress instance be used with its REST API? Probably not: most plugins generate the HTML, Javascript, and CSS to provide their functionality within WordPress pages. Few support the REST API, and those that do use it for limited purposes.
You can embed a calendar from another calendar web app (like Google's calendar) in your static site easily. If you can find an app that offers a way to embed forms you can use that too. Try searching for appointment app to embed in static web site and you'll find some candidates.
I have been exploring using Vue for wordpress frontend, and I came across so many different technologies, like Nuxt.js, Gridsome, VuePress, and they help to create sites into SPA, SSR, or static sites. I really like these ideas, because I want to move into modern frontends instead of using the WordPress default. So I am looking into headless WordPress.
After some research, I think I kind of like Gridsome with Wordpress, as Gridsome helps to build static site by compiling content from CMS and templates at build time.
So I have a very newbie question, CMS like wordpress gets updated everyday by users, to update pages, add new posts etc, does that mean you need to build the site every time people add some content to the CMS?
I'm going to build a sort of internal portal, with WordPress and I want to try out Vue, so with all these technologies out there, I am lost at what framework best suit my project with dynamic content.
Any suggestions or insights? Thanks.
So I have a very newbie question, CMS like wordpress gets updated everyday by > users, to update pages, add new posts etc, does that mean you need to build the > site every time people add some content to the CMS?
Yes that's the concept of a statically generated site.
Still it's a choice of how you design your application.
Normally when a new post is created there can be an event / webhook triggering a build job which would automatically build and deploy the page with the latest post.
Still you can have in your deployed application client side Vue components which call the API directly to retrieve data and display it. For example for the comments it could make sense to do this.
Netlify is a good example which has the whole static site generation eased up with a nice CI / CD which can be triggered automatically as soon as your site. They also have a CMS which works on top of markdown files. As soon as a changed / new markdown file is commited to the repository it triggers a build to deploy the latest version of the page.
I hope this helps.
Thanks and best regards,
ewatch
I’m about to build an app that will look like a social network: people will be able to create accounts, like posts, save posts (But not create posts).
I’m searching the right platform to build my backend, I saw many options like Parse or Node.js but I did not see many people using WordPress as backend.
My question is why not use WordPress as my backend and develop custom plugins as I need? What is the pros and cons? Am I missing something that makes people not using WordPress?
Thanks
You can use the WordPress as the backend of your app as per your requirement, As WordPress allows wp-JSON API & WooCommerce API as well.
Also you can integrate the JWT Authentication for WP REST API plugin if you want to implement the JWT authentication
Also you can customize as per your requirement so i suggest to use the wordpress as backend of your app
There are a lot of people using Parse Server for building social networks and it is a great fit. Take a look at the following app template. It shows how to build an Instagram app.
https://www.back4app.com/database/back4app/instagram-clone-swiftui
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/
I want to build a web site in wordpress. A web version like mysite.com and a mobile version like m.mysite.com. I am thinking that will it do able in wordpress because wordpress save domain name in database.
mysite.com/m will be possible but the requirement is to go with m.mysite.com.
The approach in this helped me: http://www.phillipadsmith.com/2011/11/note-to-self-a-simple-way-to-accomplish-mobile-site-redirection-using-mod-rewrite.html
However, proper creation of templates and css will really make the need redundant.