I'm currently viewing Codekit's preview link of my page in the browser. After saving changes to my CSS, Codekit will auto-refresh the browser and render the changes as expected - the first time only.
After saving another change to the CSS, Codekit fails to refresh the browser the second time. I suspect this has to do with the structure of my files in conjunction with my external server (MAMP).
Currently I've specified my the following as External Server Address http://localhost/
And have set the following as my Preview Subpath: /sw/?v=/car/create
Could it be, that only files in the document root auto-refresh every time changes are made but not those in the Preview Subpath?
Thanks in advance for any help!
I have weird CodeKit2 behavior too: any project autorefreshes fine when I put it to the ~/Desktop/myproject but fails to reload when I put it to the ~/Dropbox/oluckyman-air/Projects/Work/myproject folder.
Seems that length of the project path is affects the autoreload feature.
I had workaround this problem by moving my project to the ~/Projects/myproject folder.
Update:
As Bryan Jones says it’s actually a bug in OS X. See here for a list of ways to work around it: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai
Related
I've been using codekit for ages now, and now I've been using the version 3 since it came out.
I really like this app, but there's something I never really understood and I decided to post it here (hoping to finally understand how this works and how to make it works like I want).
I have MAMP pro installed, with some hosts.
Let's say I have this list of hosts with (fake) document root:
localhost -> documents/site1/dist
test -> documents/sitetest/dist
and let's assume that test is a wordpress site having the site url set to
http://test/ in the database.
In codekit, when I enable the browser refresh, the bottom options asks me to write down the address I would visit to see my website.
Now, if I navigate to http://test/ my WordPress website loads and I am able to see everything.
In codekit I then setup the browser refreshing options to be the following:
Animation: ticked
Refresh Delay: 0.0 seconds (default)
Preview: empty
Document-Root Subpath: empty
External Server Required: on
External Server Address: http://test/
Then when I click on the green dot (server) to preview my website, I'm expecting codekit to navigate to http://test:5757 and to properly display my website. This, unfortunately, is not the case. When I click on the preview (or server, it doesn't really make any difference for me) codekit navigates to my mac IP and the website is either not loading or loading without any external resource.
I don't think the issue is in the way I load the resource in WordPress (i use enqueue sources properly, and the website without using codekit refresh function works, load and displays as meant to).
So far, I always switched my current project to use the localhost host (changing the document root in MAMP pro) and then telling codekit to use the localhost ip as external server, but now it's a bit more complex, as I have way more projects and I was hoping not to change back and forth the document root to use codekit built in refreshing feature.
Is it possible? am I missing something here?
I read all I was able to find as well as watched the videos on codekit, but this bit here is still a bit unknown to me and any help would be really appreciated.
Thanks
PS: No need to mention I am on a MAC, right? :)
I don't believe I actually managed to fix this.
I'll leave the answer here in case somebody else is facing the same issue.
The problem I had was that my website http://test/ was using a theme called test.
Codekit, for refreshing the browser, uses a simple string search and replace in the URL, and so everything that looked like "test" in the url was replaced by the internal ip.
Quick example:
http://test/wp-content/themes/test/index.php
became
http://192.168.0.1:5757/wp-content/themes/192.168.0.1:5757/index.php
and of course no file where loaded successfully, as the path was wrong.
To fix this?
Just change the MAMP pro address to something that won't be present in the URL (in my case, the MAMP pro host called test became dev.test and problem solved.
I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.
First things first, yes I am fully aware this has been addressed here before, however none of the solutions seem to resolve my issue. My problem is simply that I have created a new web project and everything works fine with the default code template that VS2013 has provided, the problem I am currently runing into is adding my own CSS files. This is the process I went through to add them:
added CSS folder under the already existing Content directory
Linked to CSS files in the header CSHTML (I can be sure it is linked properly as it is not a 404 error
but when i run the project i get: Status Code:401 Unauthorized (pulled form the network explorer in chrome dev tools), nothing more. I have tried everything from modifying my config file to setting WindowsAuthentication to true and even moving NTLM to the top, to going into IIS and giving everyone access to every possible function to the CSS directory, been at this for an hour and I'm simply lost, any ideas?
Edit: if it helps at all this is the erro i get when i navigate to one of the CSS files:
I found the issue and I feel incredibly stupid about it, as it turns out all of my css files had encryption set on, i simply had to turn it off: right-click
*.css file > Properties (General tab) > Advanced button > Encrypt contents to secure data checkbox.
Works like a dream. If anyone ever purchases a template form ThemeForest, be wary of that.
I think I have installed everything needed and installed it correctly, but I am obviously missing something; or had a misstep somwhere along the line. I am on a Linux and I know for a fact the site works when viewed elsewhere. Here is a screenshot of what I see when I view the site locally: http://imgur.com/yPWcanu What are the common causes for this?
There might be some problems with paths. Open the Chrome development toolbar and check if there's a problem with loading the css files.
You should see them under the "Network" tab after reloading the page.
i've got an issue with website made in asp.net. A site is published and online, i've made some modifications, republished site on my computer and just uploaded a .aspx file into the server via ftp.
First time it seems to have worked after a while. But i've made a small error and want to edit it again, i did the same, but it wont change. Could it be that i need to wait some time before changes are seen? Or could it be that there needs to be a server restart or something?
If you've edited something in the aspx.cs page you will need to upload the bin directory to the remote site, or better still republish the whole site.
If it is a change to the .aspx, css or javasctipt file, the original will most likely be cached in your browser. Try a differrent browser brand or refreshing the page, ctrl-f5 does a complete refresh.
If this error was by any chance a CSS mistake, that can be easily fixed by adding a "?" at the end of the address since CSS files are normally stored in the cache of the browser and the ? tells the browser to update them. Same thing is true about JavaScripts which are kept in individual files
I'd recommend you to use the Visual Studio Publish Website under the Build instead of manually uploading the site over FTP. That built in publisher provides you many advantages of which one of them is the same issue you have faced. When you make a small change, fixing the error in host would be very faster by republishing the site that way rather than manually upping it over FTP.