Does anyone know how to take an existing Wordpress build and install it in a subdirectory of a Nuxt project?
I had this previously on my just html based site so that the WP blog would show up at /blog, and I want to do the same.
I have a folder "blog" that contains the Wordpress files.
For Wordpress
Being the bain of my existence - as far as I remember, you can move the default installation (normally in root), into a folder. All files, etc, and it should still work.
For Nuxt
You can technically deploy your Nuxt project to the root, and have a wordpress site live in that sub-folder.
Configuration
Lastly, you would need to ensure the Nuxt routing allows passthrough to that folder.
Possible Caveat
The main issue I can think of may be with the deploy for the Nuxt project, and ensuring that any custom folders on the "server" stays intact for deploy.
Related
Netlify wont allow you to deploy a website unless there is an index.html file. Nextjs didn't set me up with one when I did create-next-app. Anyone know how to fix this?
Background
There are two main ways to deploy Next.js on Netlify: as a static website or with next-on-netlify.
By default, Netlify deploys static websites, and Next.js is dynamic. Next.js requires a server. When you run npm run build to build Next.js, you aren't actually creating the HTML pages. Instead, you're creating the production assets that the Next.js server will then serve to visitors. That's why you're not seeing an index.html file.
Static website
If your website is completely static, this may a good option to consider. Your website will be blazing fast. This will export your entire site as HTML, CSS, JS, and all the static assets (e.g., pictures).
To use this, update your build command in your package.json to next build && next export. Then in your Netlify settings for the site, make sure the build command is npm run build' and the publish directory is out`.
There are a lot more details about this in the Next.js docs. Especially take care to read about what is and isn't supported in this static export.
https://nextjs.org/docs/advanced-features/static-html-export
Next on Netlify
A few months ago, Netlify released a plugin called "Next on Netlify". It's just a plugin that makes using their next-on-netlify npm package easier to use.
This will let you take full advantage of Next.js.
To use it, just go to your plugins tab, search for "Next on Netlify", then add the plugin.
If you want more details, check out their blog post: https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/
Here's a link to the Github repo: https://github.com/netlify/next-on-netlify
just FYI, you can deploy your Next JS project to Vercel since Next JS is created by Vercel
For more info visit:
https://nextjs.org/docs/deployment
How would you go about hosting / deploying a React application with WordPress on the backend? I've been using the WP Rest API plugin and that API seems to need to be hosted. Would I also have to host my front-end React application on a separate server? Or would I somehow be able to put everything onto a shared hosting service like GoDaddy or GreenGeeks?
You have a handful of options. You have the power to host React and Wordpress separately, but I prefer to host mine on the same server using docker.
If your curious, check out this starter template: https://github.com/postlight/headless-wp-starter
It's one of my favorites, and it has react pre-wrapped in a docker container with straight forward instructions.
You probably has access to CPanel or similar tools to deploy your files onto server.
Reminder is to put your build files into a sub-folder rather than deploy onto server directly,
then public_html/your_project_sub_folder_name,
then you will be able to use that domain/your_project_sub_folder_name to access the reactjs
(You cannot have 2 apps deployed at the same time if they are not sub_folder separated)
At the same time, you gain original access to WP_REST to get post data in json format already, you can create your own custom end points if needed.
Here is the anwser on how to create your own custom endpoint:
Creating custom endpoints Wordpress
Yes you can host your React App and WP separately or Host it together in one.
I tried this creating React Build Files inside WP Theme. Not yet perfect but working.
This simple WP Theme with React Build files:(React Build Folder inside WP Theme).
https://github.com/jun20/Simple-WP-ReactJS-Theme-Demo
And this is the reactjs dev files:
https://github.com/jun20/wp-theme-reactjs-dev/tree/master/Final/end
although this is not production ready and not tested.
Or
You can use the Generated React JS Build Files only with the custom Routes and Endpoints from your WP Rest API.
Like in this example: (this the build files in repo Simple-WP-ReactJS-Theme-Demo)
This React JS Build folder -> https://github.com/jun20/wp-theme-reactjs-dev/tree/Final-Build/build
it has a routes and endpoints of posts, primary navigation, at pages from live wp site site.
You can put your build files (index.html, main.js, etc) into your htdocs folder or an appropriate sub-folder. You may need to change your Apache .htaccess configuration to redirect appropriate routes.
For our project we decided for a Symfony app and a WordPress blog. It basically runs an entire installation of WordPress as a subdirectory called /blog inside the /web folder of Symfony.
We setup a quick coming soon page on www.example.com/ (Symfony Route: /) and kept running WordPress blog on www.example.com/blog/
Details about that setup on my question about WordPress as a Symfony subdirectory:
WordPress As A Symfony (Symfony3) Subdirectory
Over the course of development we let Symfony power the REST API and developed the application frontend with ReactJS. I am very unsure about the deployment. How will this work?
Note: I can't display WordPress as a React frontend and WordPress REST API because over 200 posts are now designed using a page builder provided by the theme (Lesson learned).
What options do I have?
You have to create a minified version of the React app and load it from a twig template. If you are using any react router, you will have to deal with the base url of your panel to make the urls be valid.
For instance, if you develop with a local server:
localhost:3000/my/fancy/panel
in production can happen that this url becomes
www.yourdomain.com/users/panel/my/fancy/panel
You you have to configure your router and routes to prefix /users/panel in production environment.
In my case I inject that base url in the tpl or twig and the app doesn't need to care about the environment.
Your app needs to display the Wordpress posts?
I have created an application on Openshift adding a Wordpress cartridge which I have also installed my plugins and themes.
That is all right, but now I would like to add some custom application to my domain. I have already uploaded my custom application with "git push" to my Openshift application.
Now I realised that my default Wordpress cartridge is located in app-root/repo/php/ and my custom application is in app-deployments/current/repo/php/.
When I access my website through my browser I access my Wordpress website which is located in app-root/repo/php/ but I would to know how to also access my custom application which is in app-deployments/current/repo/php.
So when user access http://app-name-domain.rhcloud.com/ the server brings the wordpress website and when user access http://app-name-domain.rhcloud.com/my-custom-application, the server should bring him my custom application.
If you want to add another application to the same gear as your wordpress blog, then you should do a custom wordpress installation instead of using the wordpress openshift quickstart. That quickstart does some trickery in the background to download wordpress, install it, and do some symlinks to run it. You would be best off setting everything up custom in your php directory in your git repo and running it yourself the way you are describing how you want it to run.
I would like to upload a custom installation of openshift. I have installed wordpress and cloned it via git. Now I would like to add manually some plugins and push it back to openshift. Where do I have to put in my extracted plugins/themes?
I appreciate your answers!
Short answer: store your plugins and themes in .openshift.
Longer answer:
Every Openshift account has what can be thought of as a username - a long number like this:
53f1a90f500446c42053423083
Each directory structure features this number so yours:
/var/lib/openshift/53f1a90f500446c42053423083/app-root/runtime/repo/.openshift
will be different to mine:
/var/lib/openshift/12345678901234567890123456/app-root/runtime/repo/.openshift
The number gets incorporated into environment variables so that scripts will work on yours and mine equally. One of these is OPENSHIFT_REPO_DIR. On your install it will point to:
/var/lib/openshift/53f1a90f500446c42053423083/app-root/runtime/repo
on mine:
/var/lib/openshift/12345678901234567890123456/app-root/runtime/repo
Another is OPENSHIFT_DATA_DIR.
When you push changes from your local directory via git, the deploy script is run and it assembles all the wp files it needs into a directory it names:
OPENSHIFT_DATA_DIR/current
Openshift moves the 'original' wp plugins and themes folders that are created during a wp install into the OPENSHIFT_DATA_DIR/current/wp-content. It looks in OPENSHIFT_REPO_DIR/.openshift for your code and copies in any plugins and themes folders it finds there.
Net effect is to assemble the plugins and themes directories by adding yours to those that came with wp. So, your fully-assembled OPENSHIFT_DATA_DIR/current will have these in it:
OPENSHIFT_DATA_DIR/current/wp-content
/themes
/plugins
/uploads
So, anything you put in .openshift will be copied to the right place, but not altered.https://github.com/openshift/wordpress-example