Preview Broken after browsing page

[Horttcore]

Could anyone reproduce this error?

Setup:

• MAMP PRO ( sites as vhost )
• CodeKit2 ( always using external server )
• Google Chrome
• WordPress ( pretty permalinks )

I clicked preview which opened the site as expected, modifiying a stylus file worked also as expected and then clicking a link on the page i.e. /blog which lead me to the WordPress blog page. Modifying the stylus file again and compiling correctly the preview won't update.

[jayfreestone]

Yep, same issue with my Vagrant setup.

It's the WordPress pretty permalinks which do it.

[Horttcore]

@jayfreestone it is prolly the mod_rewrite, all CMS will get these problems which using mod_rewrite for pretty permalinks.

[donaldallen]

I have the same setup and I think the same problem: Clicking Preview in CodeKit displays the home page just fine, and all links become http://donalds-imac.local:5757/business-services/, like that. But, if I go to http://donalds-imac.local:5757/business-services/, all URLs become http://enterprise.dev/another-page.

[frank-laemmer]

This what it looks to me (not quite if i mess something up):

Chrome (Canary 34… & Beta 32…), CK2 and MAMP pro with different hosts running on port 80.

A WordPress setup (yes the entire WP is the CK2 project) acts as mentioned above. In the CK2 projects settings i need to check "Always use my external server…", otherwise i'll get the no index page. When i call up the main top URL my changes to the LESS file are being pulled in live (css injection as expected). Now i navigate to any sub page – no injection any more, need to manually reload to see changes.

I also tested a Laravel application with LESS, here i don't get any CSS injection at all. But maybe that's a different issue here? Also, the chrome console tells me:

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://fuckup.local:5757/dist/css/styles.css".

I think that message is also related to the CK2 server, because when i just run the URL over the MAMP server the message does not appear. But i am really not sure if this related somehow.

keywords: .htaccess, mod_rewrite, routing

[bdkjones]

Can someone walk me through how Wordpress pretty permalinks work? What do you do to turn them on, how do you configure them, etc.

CodeKit rewrites urls as it serves the page, so this permalinks thing must be acting after the page is served from CodeKit.

Sent from my iPhone

On Dec 19, 2013, at 1:02 PM, Frank Lämmer notifications@github.com wrote:

This what it looks to me (not quite if i mess something up):

Chrome (Canary 34… & Beta 32…), CK2 and MAMP pro with different hosts running on port 80.

A WordPress setup (yes the entire WP is the CK2 project) acts as mentioned above. In the CK2 projects settings i need to check "Always use my external server…", otherwise i'll get the no index page. When i call up the main top URL my changes to the LESS file are being pulled in live (css injection as expected). Now i navigate to any sub page – no injection any more, need to manually reload to see changes.

I also tested a Laravel application with LESS, here i don't get any CSS injection at all. But maybe that's a different issue here? Also, the chrome console tells me:

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://fuckup.local:5757/dist/css/styles.css".

I think that message is also related to the CK2 server, because when i just run the URL over the MAMP server the message does not appear. But i am really not sure if this related somehow.

keywords: .htaccess, mod_rewrite, routing

— Reply to this email directly or view it on GitHub.

[donaldallen]

@bdkjones, here's the rewrite from htaccess:

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>

To turn them on, it's under Settings > Permalinks.

[coreyallen]

Yep I'm seeing this as well

[bobrocke]

I can also confirm this.

[sethta]

I can also confirm this behavior.

[C-Benz]

Sorry if this is the wrong place to post this question, but is previewing through the "preview" button in CK2 completely replacing the way CK1 would inject css into the current browser tab or does that still work in addition to the new preview option? I promised I watched the video!

[frank-laemmer]

@CaptainJuiceBox I guess yes. The new webserver should replace the old browser manipulation. The idea is indeed very promising: Fast mobile previews, Firefox support …

[bdkjones]

Yes. The new method completely replaces the old, CK 1 way.

[C-Benz]

I agree - I've tried the preview on a very basic site I'm running on my local machine and it's awesome how it refreshes all my devices automatically. Just can't figure out how to get it working at all on a more complex site that runs on MAMP on a server on my local network. I'm sure it has to do with not having vhosts set up but I would venture that others will run into the same. Will have to figure out how to get my local server configured to get CK2 working.

[bdkjones]

I need details on the "more complex site". What exactly are you running?

[donaldallen]

I think by complex site, he means anything that uses mod_rewrite to rewrite URLs, like WordPress or any CMS really. I still can't get CK2 to work with any of my WordPress sites beyond the home page (home page has correct links, subsequent pages do not).

[smlombardi]

I still can't get CK2 to work with any of my WordPress sites beyond the home page (home page has correct links, subsequent pages do not).

Same here, unfortunately.

[bobrocke]

The "complex site," in my case, is a local MAMP Pro virtual server (not localhost) running WordPress. What configuration details would be important to CodeKit? I'll gather and post them.

Bob

[C-Benz]

Here's a video of my setup. You'll probably want to download it. Streaming it from dropbox looks pretty crappy.

https://www.dropbox.com/s/ln0wuxo2eh83f2p/My%20Codekit%20Setup.mov

[frank-laemmer]

Just downloaded and tested CK2 beta4? (15773) and i still can't get live reload working on my mod_rewrite htaccess projects. but i think that's ok as the "release notes" didn't mentioned these issues anyways.

[zengabor]

This missing feature means that CodeKit 2 is unusable for my projects. (I use AppEngine, an application server where URIs have nothing to do with real files on the disk, except for static files.)

Good thing that I can keep using version 1.9.3 :)

[smlombardi]

I wish there was a way to completely bypass the built-in server, and leave file serving to the OS, as in 1.0.

[bdkjones]

@CaptainJuiceBox Watched the video. Thanks for putting that together; it definitely helped clarify things.

The issue is that MAMP is set up to host a folder with a ton of projects in it. Let that be "Folder X". In X, you have a subpath X/GirlScouts/svn. You're adding this subpath as a project to CodeKit.

Because X is the webroot for MAMP, all of your link and style tags are root-relative to X. In other words, even though svn is the real webroot for your GirlScouts site, your tags are all relative to X, like this:

src="/GirlScouts/svn/js/frontend/frontend.js"

You've added the folder /GirlScouts/svn as the project in CodeKit, so the app is treating that folder as the webroot for its internal server. When CodeKit goes to serve the files, it takes the project folder (GirlScouts/svn) and adds the src path you defined. So it ends up looking for your javascript file in the following location:

X/GirlScouts/svn/GirlScouts/svn/js/frontend/frontend.js

(I think.) If you look at the console in your web inspector, you should see listed in those 17 errors a bunch of lines saying "unable to load resource: [path]. Tell me what those paths are; I think they will match what I explained above.

Your root-relative paths are the issue because they are relative to the MAMP folder, not the webroot for the girl scouts project. The best way to solve this issue is by replacing your root-relative paths with file-relative ones:

src="js/frontend/frontend.js"

Or, if you want to keep the root-relative paths, you need to make the server root match the root folder for the project. You can do that with vhosts.

[smlombardi]

Odd. Here's what I do.

I have a worpress site, let's say "http://hith.dev". This points to the wordpress root folder on my HD, "hith_site"

In the past, I never added that folder to Codekit ( or any other processors) since there's a ton of files in there for multiple themes, etc.

I added only my theme folder, at "/hith_site/wp-content/themes/mytheme"

Now, I guess you are saying I should instead add the entire "hith_theme" folder to codekit?

I will try that and report back. It will be a pain to have many css files in my project I'm not working with. Perhaps there can be a way to tell CK2 to "focus" on a subdirectory, here "mytheme"?

[coreyallen]

I'm the same and have always just added the theme folder when using a preprocessor.

I'll have to try the entire wp install later today.

[bdkjones]

Yes; you should be adding the whole Wordpress folder, not just the theme subfolder. Use the 'Skipped Items' list to narrow down what directories the app watches.

I will add some intelligence to the app so that it detects a Wordpress project and offers to automatically add the right stuff to the Skipped Items list.

[bdkjones]

Also, for Wordpress sites you're likely going to want to check the 'Use External Server for all requests in this project' box.

[smlombardi]

Now it doesn't work at all.

1. still working with a web site at http://hith.dev:80 on Mamp pro. Site loads at that url.

2.set up code kit beta 4 by dragging whole wordpress site into folder. settings screen attached

Type http://charizard.local:5757 into Safari 7.01. I get this:

[smlombardi]

Addendum: I realized that beta 4 made me re-create my project from scratch, yet somehow the external server was filled in already.

So, I went back and erased and re-typed it, now it works.

[smlombardi]

Although the page serves up, the style changes are not being injected. I need to manually reload to see them.

[bdkjones]

Are there any errors shown in the Javascript console?

Do you see the <!-- Additions by CodeKit to enable browser refreshing --> comment in the HEAD tag of the page?

[smlombardi]

No JS errors in console.

Yes, I see this block:

[bobrocke]

Has anyone written up a guide to the "proper" way to configure WordPress/MAMP/CodeKit so that the server updates/injects changes and the URLs work properly while clicking through the site?

[bdkjones]

Ok. WHAT I NEED is one of these damn Wordpress sites so I can test with it over here. I need someone to zip up the ENTIRE Wordpress site AND include an SQL dump of the associated database so I can re-create that in MAMP on my end.

That's the only way I'm going to be able to figure out what's happening here. Someone please post a link to download a Wordpress project & database here.

[bobrocke]

10-4. Can you deal with a BackupBuddy complete backup file with an ImportBuddy script?

[bdkjones]

Nope. Never heard of that stuff. Just a regular zip.

[bobrocke]

OK. Here are links to my Dropbox public folder for the site files:

https://dl.dropboxusercontent.com/u/1872237/www.brp.dev.zip

And the database dump file:

https://dl.dropboxusercontent.com/u/1872237/wpBRP_2014-01-01.sql.zip

Let me know if those files work for you, or not.

[smlombardi]

I will send mine this evening when I get home.

[smlombardi]

FWIW, a backupbuddy file is just a zip will the site contents and the sql file.

[frank-laemmer]

quick check with CodeKit2 BETA 5 (15825):

good news: local URLs (http://fuckup.local:5757/mydeep/deeppath) are working now (so something in modrewrite htaccess has changed). so i don't need to check "use this external server for all requests".

bad news: autorefreshing still doesn't work (for me), neither with external server or without. i have two test projects, a laravel app and a more/less standard wordpress (yes the whole folder not just the theme). i use to write .less – compiling to css (also with sourcemaps) works fine. but neither CSS autorefresh nor refreshing the templates (php or twig files) refreshes the browser. always need to hit comand+R.

[Horttcore]

In Beta 5 there is no CodeKit comment <!-- Additions by CodeKit to enable browser refreshing --> and no code live preview. Also browsing is not possible always links back to my localhost instead of http://xxx.local:5757/

[bdkjones]

Fixed in Beta 6.

[frank-laemmer]

quick check with codekit2 BETA 6 (15860):

works like a charm now (NICE).

just out of curiosity: what's the benefit of not using the external server for all requests? why not always use the external server for everything when there is one? see user experience view. how fast can i setup CK2? what do i have to know?

[bdkjones]

The answer is that it's slightly faster for CodeKit to just serve stuff itself rather than forward the HTTP request to the external server, receive a reply, modify that reply accordingly, and then send the reply to the browser.

[Horttcore]

I've tested it and I'm really happy that it works now. Just one question, how do I have to configure it to work with subfolders instead of vhosts? I think I have to change the setting for "Website Root Subpath".

In my case I only add WordPress themes as my project, I changed the "Website Root Subpath" to "../../../" as the the folder structure ist "/wp-content/themes/MY_AWESOME_THEME"

[julientonton]

Hey guys! Are you able to auto-refresh your browser after saving a PHP theme file? For me it works well with CSS but no refresh with PHP. I use MAMP Pro with a Wordpress and setup the external server URL in CK2. Thanks!

[bdkjones]

Have you disabled OpCache on MAMP?

[julientonton]

Yes, I've no cache enabled in MAMP PHP settings.

I'm running Mac OS X Yosemite,maybe it's something related ?

[bdkjones]

Sorry; I can’t read that screenshot. Can you put it in English?

Have you run the Tasks > Disable OpCache in MAMP from CodeKit’s menu?

Is your PHP file well-formed? Show me the entire contents of the file in question.

On 23 Oct 2014, at 19:20, julientonton notifications@github.com wrote:

Yes, I've no cache enabled in MAMP PHP settings. https://cloud.githubusercontent.com/assets/3537546/4764387/3bb62754-5b24-11e4-9dc6-04e2355d3432.png I'm running Mac OS X Yosemite,maybe it's something related ?

— Reply to this email directly or view it on GitHub https://github.com/bdkjones/CodeKit/issues/57#issuecomment-60336671.

[julientonton]

Sorry, I can't find where to change MAMP lang but it says : PHP cache module : none

I've run the Tasks > Disable OpCache in MAMP, it says it's already no changes have been made.

The PHP file I'm changing is a template from my WP theme, yes it's well formed, it has no warning or error. Here is the content of my page.php template : http://pastebin.com/XSimuuc9

I preview the page from C.K. URL : http://mymac.local:5757/ and the auto-refresh works well with CSS edition.

I made you a video capture of my setup : http://cloud.tonton.ca/263y2w1z0n34

I hope it's clear, let me know if you need more. Thank you! J.

[julientonton]

Hi, Should I open a new thread for my problem ? Thank you.