Wordpress styles dont load on ddev ngrok live link - ngrok

I have setup a simple wordrpress environment with ddev.
I am trying to use the ddev share function which should give out
a live preview of the local WP site but when I try visiting the site from another
computer on a different ethernet then the site loads up, all in regards to html and some
primitive css but not the whole thing.
Locally ofcourse everything loads well.
In my console of the ngrok site I get various warnings like such:
Loading failed for the <script> with source “https://mysite.ddev.site:8443/wp-includes/js/jquery/jquery.min.js?ver=3.5.1”.
Note, the "mysite.ddev..." is the link to my local environment, So my guess is that this is to do with something regarding relative/abs urls, but I am unsure on how to fix this
I reffered to this post from 5 years ago which kind of touches on the subject.
I installed "Absolute Relative URLS" but that didnt solve the problem.

The problem with WordPress is that it embeds static URLs right into the database, so it's far harder to use in situations where you either change the hostname or do anything else. This is a significant problem with WordPress, and there are many workarounds, but not very satisfactory ones.
The article DDEV share: Sharing a DDEV-Local project with other collaborators in real time explains how to use a stable subdomain and do a search-replace.
WordPress only has the one base URL, but the wp command is built into DDEV-Local’s web container.
This set of steps assumes an ngrok subdomain of “wp23” and a starting URL of “https://wordpress.ddev.site“.
Configure .ddev/config.yaml to use a custom subdomain: ngrok_args: --subdomain wp23
Make a backup of your database with ddev export-db or ddev shapshot
Edit wp-config-ddev.php (or whatever your config is) to change WP_HOME, for example, define('WP_HOME', 'https://wp23.ngrok.io');
ddev ssh
wp search-replace https://wordpress.ddev.site https://wp23.ngrok.io
(assuming your project is configured for https://wordpress.ddev.site and your ngrok_args are configured for the wp23 subdomain)
Now ddev share

After a bit experimentation I've found a solution.
This post is a bit old thus DDEV has added some additional
upgrades to it's Wordpress Environment, this solution is tested on:
ddev -v:
ddev version v1.16.7
Solution:
Install and Activate Relative-Url Plugin
For good measures, restart the DDEV site ddev restart
Into the terminal Write:
ngrok http -host-header=rewrite .ddev.site
If you're not sure what your projects/site name is, use
ddev describe
and underneath the URLS the first link that will lead you to your
localhost site should be the URL you insert into your ngrok rewrite

Related

Migrating Site To Digital Ocean and having trouble with redirecting to HTTPS

I am migrating my site to digital ocean and I am having an issue with Https. I have moved the directory and the apache2 config file and mysql database. I believe I set everything up correctly but now I want to test it. I have edited my /etc/hosts file with my new ip and sitename.com. However when I try to go to my browser and look to see if the site works it keeps trying to redirect me to the https version of my site.
I have tried going to chrome://net-internals/#hsts and deleting the site but it still redirects to https. How can I test my site without being redirected to the still hosted version of my site?
Thanks!
Aside of the wp_options field, WordPress stores lot's of links 'hard-coded' which all will contain the https. You would need to do a full search and replace on the database, but be aware of serialized stuff. To to safely perform a search and replace you could use a program found on: https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
Works like a charm.
Another way is by using wpcli if you have commandline access and wpcli is available. From the command line go to your root directory (containing the index.php) and type:
wp search-replace https://www.your-domain.example http://www.your-domain.example
Or type:
wp search-replace https://your-domain.example http://your-domain.example
Based on your setup up course.
Always make a full backup of your database before performing these actions, so you can restore if any problems occur.

Deploying First WP Site with Understrap, Can't Find Required Resources

I've transferred my database and entire Wordpress file structure over to the live site, but the live site is still looking for all its resources at localhost:8888/.
I looked back on what I did when getting started and I edited my gulpfile.js to include
var browserSyncOptions = {
proxy: 'localhost:8888',
notify: false
};
Thinking this was the issue, I switched it to proxy: $_SERVER['DOCUMENT_ROOT'], but still no luck. Any ideas for what I may be doing wrong?
Unfortunately I haven't been able to find a single bit of information about deploying an understrap themed site. Here are the docs for the theme though: https://understrap.com/demos/core/wp-content/themes/core-understrap/docs/.
I've transferred my database and entire Wordpress file structure over to the live site, but the live site is still looking for all its resources at localhost:8888/.
That is an easy to way to get into live server maintenance hell. UnderStrap is a unique theme package because it has strong npm dependencies running in the back-end that are appropriate for localhost development builds. For that reason, Here is an alternative approach I recommend instead.
Install a clean vanilla version of WordPress on your live server.
Install and activate UnderStrap.zip on your live server through wp-admin.
Import/Export your posts and pages from your local site, onto the live site. Add all media images. Adjust your settings, install your plugins, and clear your cache.
Now use the file manager in your C-Panel to only upload all modified theme files from your localhost to your live server.
Test your site, then go live.
That is more of a manual process, but it has its benefits. For one, you learn and see what each step looks like, you push up only what you need, you don't have localhost decencies running on your live site and the database is 100% targeted on live site content.
If you can access the wp-admin of your live site there's a great plugin called Velvet Blues Update URLs that you can install.
Install it, go to Tools > Update URLs and enter the localhost address and then the live site address.
Always works great for me.
Many developers have done this process by running its gulp dist when processing deployment. It will create dist folder which you can upload on the server. It contains all necessary files that supports running the scss. So try to use also the gulp dist-product as a "product" that the theme can be published and downloaded in the near future.

wordpress admin redirect loop

I've got a copy of our wordpress instance running inside a Docker container.
Our live instance works well but inside the docker container, I do get a redirect-loop as soon as I try to get access to wp-admin.
I've disabled all plugins, I've cleared my cache and so on but nothing worked so far.
OS is debian, similar to our live system. When I get the redirect-loop, there's no information written in my apache error.log-file.
Oh and this instance is accessible by using a subdomain. I had to rewrite all "www.domain.com" to "sub.domain.com".
If I can provide you with any informations to solve my problem just ask. I have absolutely no idea where to start.
Paddaels
Seems like you missed some records in the database. The best approach is to use a tool like https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
If you download this free tool and upload to your server then it does a batch find-and-replace across every single table in your Wordpress database.
So, for example, replace http://www.example.com with http://sub.example.com
You can do a dry run and it will show you all the replaces that it will make. Once you're happy then click the "live run" button and all the changes are made.
I use this tool all the time when I am moving a site from my local machine to the live server. I also use the exact same approach when migrating a site from http to https

How can I deploy a static version of a Wordpress site to a server that does not run Wordpress?

I have a simple Wordpress site that does not use any features that require code to run. I would like to deploy it on a server as a static site that does not run Wordpress for security and performance reasons.
The server is reachable via FTP. While I would prefer an automatic solution I would not mind getting a local copy or zip file that I can deploy manually.
I have done the exact same thing for a client, we tried easy solution first i.e. use this awesome plugin https://wordpress.org/plugins/really-static/
However it was big news website on multisite (where content was created) and then published to child sites (which we converted into static sites) above plugin faced few issues in this situation, for that we then switched to server side solution, using a very simple utility called wget on server
wget -m -k -K -E http://your.domain.com
You may study the wget manual in detail for all those awesome things you can do with it, it will produce all html files in a folder with relative urls, so you can copy and paste into any folder and site will work.
Here are few links for help with wget:
http://vaasa.hacklab.fi/2013/11/28/howto-make-a-static-copy-of-joomla-site-with-wget/
Wget Manual for all flags and options
http://www.gnu.org/software/wget/manual/wget.html
Really helpful link
https://swsblog.stanford.edu/blog/creating-static-copy-website
By the way all dynamic functions like comments etc will not work, so for that we used third party services like e.g. for comments you may use disqus etc

Cannot get ngrok to serve up my WordPress site

I have a simple wordpress install using Mamp Free Version on OS/X.
Version 2.0.19/2.0.19
Web Interface h#tp#//127.0.0.1:4040
Forwarding h#tp#//6c219c8e.ngrok.io ->
localhost:8888 Forwarding
h#tps#//6c219c8e.ngrok.io -> localhost:8888
Connections ttl opn rt1 rt5 p50
p90
1 0 0.00 0.00 6.00 6.00
For some reason when I try the links generated by ngrok, the website loads forever, then I get
Page not available.
As #Magico stated, download from the repo https://github.com/jonathanbardo/WP-Ngrok-Local and place that in your plugins directory, activate the plugin.
Then, after you get your ngrok tunnel URL up & running, take that URL and place it in your wp-config.php as follows:
define( 'WP_SITEURL', 'http://example.ngrok.io/' );
define( 'WP_HOME', 'http://example.ngrok.io/' );
Now you will be able to access the homepage as well as the admin dashboard.
According to the faq:
You need to add one of the following plugins to force Wordpress to issue relative URLs.
https://github.com/optimizamx/odt-relative-urls
Sorry I don't have enough reputation points to post the rest of links.
You can start ngrock setting your virtual host and your port with this command:
ngrok http -host-header=dev.yoursite 8080
and then install and activate only one of these plugin to navigate with relative urls
https://github.com/jonathanbardo/WP-Ngrok-Local (i'm using this one)
https://github.com/optimizamx/odt-relative-urls
http://wordpress.org/plugins/relative-url/
http://wordpress.org/plugins/root-relative-urls/
full article and documentation here
https://ngrok.com/faq#virtual-hosts
I'm not having luck with this approach. I'm using a plugin called "Relative URL" but only the homepage is rendering on my end. Other pages in the site do not show up. The site is running locally as localhost:8888 which is the path I set temporarily in the SETTINGS>GENERAL SETTINGS and I noticed with the Relative URL plugin running it's still trying to throw the :8888 on the end of the ngrok URL. Just don't know what to do about it currently.
The Relative URL plugin in wordpress got my site loading correctly remotely through ngrok.
For someone who is still having an issue with ngrok on wordpress , you can follow these steps:
After running ngrok copy the link and edit siteurl and home column in wp_options table
Go on administration panel and then edit your menus by adding ngrok_url generated.
I have a much better solution. Much much better. Download the program called "sitesucker" in order to download all files of your site from the localhost. You need to put the address https://localhost/websitename or https://localhost/wordpress, inside the SiteSucker app, if you are like me :), then you put the folder of the website you have downloaded just now, inside your localhost. This is kinda of an assembled site, because sitesucker makes requests for all pages and downloads css and htmls, and also all resources. Sitesucker, if used correctly, and legally, is a great tool. Everyone that will access to this folder after you share the link with ngrok, will see it as a normal website, assembled, not as wordpress format... if you understand what I mean.
So you share the link that brings straight to your localhost, I mean the link that ngrok have created, and people can see the website from the folder that has your assembled website, downloaded previously from SiteSucker :)
DONE

Resources