Is there any possibiliy to deploy full wordpress app in Nuxt app? I mean I want to have adress foo.com of my app and on foo.com/bar will be wordpress app. Is there any way to do this? Nuxt router will be able to deal with this?
Wordpress API and iframe aren't answers, which I look for. As I said i want to deploy whole wordpress on specific adress of my Nuxt app.
A bit of background
NuxtJS (build as static) is a client side app.
WordPress is a PHP server side app
A wordpress site usually get served to users by web servers like apache or nginx.
Client side apps served by any web server (including apache or nginx)
So you can't "deploy wordpress in nuxt", but it is simple to get what you want:
Follow this guide to move the wordpress to a subdirectory
Upload the nuxt app to the root directory
In case you are using SSR or any other requirements that force you to use Nuxt in server mode, your options are:
Setup nginx as reverse proxy
Setup apache as reverse proxy
Setup a proxy in the node server itself, maybe this project could help
I think there may be a problem with this without the wordpress API, but the question is, do you care about Nuxt.js or maybe just Vue is enough? Remember that in Vue 2 you can use an inline-template, thanks to which you can render elements on the server side. For this you will add the necessary elements from the Vue ecosystem, such as a router and setup you will have similar to Nuxt.js.
Example code:
<div is="navbar-dropdown" inline-template>
<div v-cloak :class="isOpenDropdown ? 'visible opacity-1 mt-0' : 'invisible opacity-0 mt-10'">
<?php get_search_form(); ?>
</div>
</div>
Related
I have just started looking at KeystoneJS v5 and I am now trying to set up a passport auth strategy locally (in my dev box) using Facebook. Unfortunately, in order for this to work the site must be served encrypted. How do I serve the KeystoneJS site using ssl/https on my dev machine? I'm on Ubuntu via WSLv1.
I ended up just putting Nginx in front of it...
I'm trying to develop an app that uses Strapi Admin Panel api generation, and, at the same time, serves as a website that consumes this api.
So, basically, I'm trying to build a website:
where /api route servers as a Strapi API endpoint
where /admin route serves as a Strapi Admin Panel for API creation
where all the other routes are configured to serve my website, i.e.:
/ route is the landing page of my website
/contacts is the contacts page
etc.
And, moreover, the static files of the website (html/css/etc) should be served from the server that, respectively, consumes the generated API (server-side).
I hope I'm not expressing myself too vaguely.
Essentially, I need to integrate one node.js app (my website) with another node.js app (Strapi) in such a way that they work seamlessly together as one.
Does anybody know how to achieve that?
I've read some answers here on Stackoverflow and on Strapi GitHub issues, and some people said that the way to achieve that is to run two separate apps on different ports, but it doesn't feel right to me (or maybe I just don't understand some basic stuff).
What I need is to make a single app that is, basically, a simple multi-page website, but enhanced with api generation tools from Strapi.
I have my Strapi app up and running and I thought maybe I should find some place in the app folder structure to put my website (i.e. all the static stuff to the public folder), but where to put the server-side stuff?
And I'll need to use a templating engine, so the question of "where to put the client-side files" arises again. The more I dig into the code, the more I get confused.
PS: I'm fine using Koa which is used as a server for Strapi.
PPS: Further, I'm planning to deploy the app to Heroku on a single Dyno (if it is important).
Okay I just played with the routing prefix and that is the solution I suggest you.
So you will have to build you website app. And push the build in the ./public folder of the Strapi application.
Then in your api/.../config/routes.json files you will have to add an option prefix in the config key of each of your routes and for all your APIs
{
"routes": [
{
"method": "POST",
"path": "/restaurants",
"handler": "Restaurant.create",
"config": {
"policies": [],
"prefix": "/api"
}
}
]
}
So at the end you will have your admin on /admin
Your APIs endpoints prefixed by /api
And your website/assets on /
I found myself in a similar situation. In my situation I wanted to deploy Strapi along with a static site (in my case built with Gatsby) just in one server instance, at least to try if possible.
There are some open questions left from the original post, so let me answer them based on my context:
First of all, yes it's possible. But each app has to function on their own port. In that way your server knows which one to serve based on the request. Trying to mix them into a single port will mess a lot both apps.
In my situation, what I end up doing is to have Strapi running in Port 1337 and serve my static page in Port 80. In order to achieve that I used NGINX for serving content and work as a proxy. I first tried to have them on the same domain, but got a lot of conflicts. So I strongly suggest to use subdomains. So I ended up like this:
domain.com serving my static page
api.domain.com serving Strapi
You can achieve that having your configuration file in NGINX like:
server {
server_name domain.com www.domain.com;
root /var/www/domain.com/html;
}
server {
server_name api.domain.com
location / {
proxy_pass http://127.0.0.1:1337;
proxy_http_version 1.1;
}
}
As you can see there is a lot of configuration you will need to perform, so I won't recommend trying something like this in Heroku since you really don't have much control of the Dyno (ports, routing, etc). If you want to go with Heroku then, you should have a separate Dyno for each app. One for Strapi and a separate one for the other app.
I would strongly suggest something like DigitalOcean or any other where you have total control over your server in Digital Ocean called a Droplet. I was able to install on the same Droplet an instance of Strapi and serve my static site built in Gatsby.
Is that possible to host a Wordpress Blog under a route in my React Web App?
For example, my React App is running on domain www.myreactapp.com, can I host a Wordpress blog under route www.myreactapp.com/blog.
When I worked with PHP Web APP, it was easy, you just need to create sub-folder named "blog" and install Wordpress in it. I am hoping to get a solution like in PHP Apps, if yes I can just make use of all features of Wordpress with less amount of coding.
Thanks in advance
You cannot do it directly as WordPress have its own configuration which is necessary for WordPress website due to which admin panel will not work, but you can use WordPress API to load the data you wanted from WordPress and show in react app.
I am not sure this is exactly what you wanted or not but you can also setup the WordPress separately in sub domain like http://blog.myreactapp.com
Also let me know if you found any working solution
All,
We can host the Wordpress blog along with React App like in the question(for example www.myreactapp.com/blog).
Steps
Use Nginx to host the React App
Install Wordpress
Add a rule in Nginx to proxy the request to WordPress when the request comes to /blog. http://nginx.org/en/docs/http/ngx_http_proxy_module.html
Hope this helps
Thank you
I am using node.js and express to render some pages like home pages and some other SEO routes.
For a specific route I want to serve a react SPA which I host on a CDN.
on that page I load the main.js from the cdn, but it is trying to load the rest of the assets from the node server, not the CDN.
One solution is to serve the SPA from node, but I know serving assets from node on production is not the best practice.
So how do I render some routes locally with node, and proxy another to a SPA application?
Do I need a third server for reverse proxy?
Thank you!
I have a website running on node.js and express, hosted on Amazon EC2 with a normal domain (e.g. www.example.com)
We want to add a blog to the website. We would like the blog route to be www.example.com/blog
I have tried a Ghost installation under node.js (with a proxy layer to handle the port and url remap). I got it working ok, but the feature set is not robust enough for our content creators. They would rather work with WordPress.
But WordPress does not have a node.js install, and I do not have the bandwidth to set up and run a WAMP server in addition to the node.js server we currently use.
So I am investigating using a another hosting option for wordpress and using a proxy layer to redirect to the hosted wordpress blog.
From what I have read online, WordPress hosting will not work (cannot configure the URL properly on the WordPress side). And I could not get the proxy layer to work with a test account.
Will a 3rd party (like GoDaddy) work?
I am envisioning that we host the blog on GoDaddy. And on our site, I set up a proxy to map www.coursehunter.org/blog to the GoDaddy hosted Wordpress blog. Has anyone done this? Does it work technically? I understand I would probably have to edit the .htaccess file.
Are there SEO gotchyas from an implementation perspective? The main point of our blog is to build out content for our main domain which is why we want the www.example.com/blog url.
Thanks!
I would suggest you look into Nginx web server. You can set it up as a reverse proxy for your NodeJS/Express web application and install its php-fpm module to handle the PHP part(Wordpress).
Here is a guide to set up Wordpress with Nginx https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-nginx-on-ubuntu-14-04
And here is one with set up your NodeJS application with Nginx https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-14-04
In your case, you will need to setup the url configuration so that the parts get routed to the correct destination that is NodeJS part is handled by reverse proxy and Wordpress is handled by php-fpm