I'm having a problem using Vaadin (in Eclipse) and its associated styling engine Valo, and the TouchKit package. I mention all of these because I'm not sure which, if any, is causing the problem. The name of my custom theme (which imports Valo) is simply "touchkit".
I have the project running on a Tomcat server on localhost and accessible in my browser. I wanted to tweak some of the CSS so I edited the appropriate file WebContent/VAADIN/themes/touchkit/touchkit.scss. After editing this file, I recompile the theme and see the appropriate changes in the generated file styles.css. Then I go to load up the application in my browser, and things get weird.
I can load the page and, using Chrome's developer tools, see that the page requests styles.css for download, as expected. It gets a 200 OK response from the server, but when I view styles.css, it contains just a single \n. This is also true in Safari. Even using cURL to download styles.css yields the same result. In the Eclipse editor, and when I inspect it in the terminal, styles.css is ~12,000 lines long. Why can't my browser or cURL get that data?
I can view similar project demos on Vaadin's own site and the stylesheet (which should be almost identical to mine) is loaded correctly. Also, other Vaadin projects on my localhost server have their stylesheets loaded correctly (though they do not use Valo). Compiling the theme in Eclipse yields no errors. Because the issue presents itself across a variety of graphical and non-graphical clients, I'm starting to think the issue is with Tomcat. But I can get to the directory from which Tomcat serves files and styles.css is correct in that folder too. There's no apparent reason that Tomcat would be serving a blank file.
You may have guessed from the description, but I'm working on a Mac. Any help is appreciated!
PS Mods - I also asked this question over at Superuser since it wasn't 100% a programming question. However, I'm new at Superuser and couldn't create tags for Vaadin or Valo, so I'm asking here where there might be a better chance of getting an answer.
Hard to say, since your are doing everything fine. My best bet would be the tomcat implementation you are using, maybe there's something weird there. Try upgrading to latest if it's not or to a previous version.
FYI I'm using Tomcat 7.0.55.
PS: your attempts are in run/debug from eclipse or have you made a .war form the project and deployed it with the Tomcat-Manager?
Regards
add below to your gwt.xml, and touchkit is not valo aware see https://vaadin.com/forum/#!/thread/8264224/8264223
<set-configuration-property
name='touchkit.manifestlinker.additionalCacheRoot'
value='src/main/webapp/VAADIN/themes/MyTheme:../../../VAADIN/themes/MyTheme' />
Related
I've been messing around with a tutorial site, and I found that my VS Code LiveServer plugin doesn't work properly when I try to open Django templates. The CSS I applied is missing (although everything renders correctly in my local development sever), and the template language code is actually printed to the screen rather than executed (see image below). My liveserver plugin appears to be working with html files outside of Django.
(1) Right now I'm right clicking and selecting "Open with Liveserver." Is this wrong for Django? The liveserver docs recommend trying to "visit the Actual Server Address: http://localhost/[workspace], not the VS Code extension's Live Server Address: http://127.0.0.1:5500/". I tried including the file path in place of [workspace], but no luck. What do I do here?
(2) I saw in another thread where someone recommended their own solution, here. I'm not sure where I'm supposed to run the './manage.py livereload' command, but it's not working in command prompt. What is the difference between './manage.py' and 'py manage.py'? And will this solution be any better than the VS Code plugin?
I have had the same problem as you and managed to get it working with the link you included in point (2) of your post. You may have gotten sorted by now, but I thought I'd post it here in case.
First I went to my console and ran:
pip install livereload
which was installed successfully. Then I added 'livereload' to my installed apps in my settings.py file. E.g...
INSTALLED_APPS = [
...
'livereload',
...
]
Then I went to the directory containing my manage.py file on the terminal and ran
./manage.py livereload
and this provided me with a link to a live update server. Previously I had been running a server with "python manage.py runserver", so this is to replace that command.
Now when I save any changes I make in my IDE, they update live on the browser.
Sorry that I haven't included any screenshot images for clarity, I wasn't able to for some reason.
I am working through Scrimba/VSchool tutorial, so I am wondering if you may have run into this problem through a similar path.
I believe Live Server and Django are incompatible - but if you find a fix, let me know.
Live server is acting as your web server (port 5500 by default), serving up files as your make changes.
Django is also acting as a web server (port 8000 by default), interpreting Python code, and rendering the Django Template Language.
Unfortunately, as far as I can tell, live server cannot execute all this Python code, so all the Django Template Language will not render. This includes the {% load static %} method that Django uses to read the CSS & JS links in the html.
For those of you who tried the top answer, but still got stuck: you have to install dj-static, or whitenoise (as recommended by the dj-static github page) to serve the static files. I noticed that it's really slow though. Maybe it's just me, but I found it to be quite unworkable. I ended up writing an autohotkey script to activate my browser and then refresh. At least for me, that´s a lot quicker.
in your command line you have to run the server by the following command:
python manage.py runserver
but be sure that you are in the directory that has manage.py file. you don't need to type the port. because you will get the default port which is:8000
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.
PLATFORM
* Asp.net Webforms - C#
* .Net 4.5
* Azure Web Hosting
* Chrome (43.0.2357.134 m) - Latest
PROBLEM
I am currently bundling CSS and Javascript using the ASP.NET Web Optimization Framework. When testing in my local environment, all is working great. You can clearly see that the aspx page is relatively small and the bundles are listed as separate individual files (cssAll & jsAll).
https://www.dropbox.com/s/dazt681qylk41hm/local-login-cache.PNG?dl=0
Once I deploy to Azure, the Javascript bundle does remain correctly linked and is cached, but the CSS bundle is no longer referenced. Instead, all CSS code is written directly into the head tag of the aspx file. This causes the aspx file to grow exponentially (from 5KB to 87KB) and it prevents the CSS from being cached. Interestingly, when I disable cache, the CSS file is now sent as a seperate file, and my aspx returns to its smaller size.
https://www.dropbox.com/s/eox7b0vc0mi27wo/azure-login-combined.PNG?dl=0
MY THOUGHTS & QUESTIONS
Is this normal behavior? Am I simply misunderstanding or misusing Chromes developer tools and/or the way CSS caching works?
If this is normal behavior, then why does my local environment respond differently to the Azure hosted environment?
If this is NOT normal behavior, then where could the issue be? (Please read considerations below to see what I have already tried or troubleshooted)
CONSIDERATIONS
I have confirmed that all CSS, Javascript, and relevant directory structures are identical between my local machine and Azure. (Web deploy handled this well)
I have tried the exact same tests with IE11 and Firefox, getting similar results. If caching is disabled, the CSS comes seperately as intended, but if caching is enabled, then CSS is verbosely written into head tag of aspx page.
Problem is not with Bundling because it is working. However, I have tried linking to each CSS file directly, rather than using the bundle, and the same oddity occurs.
I have completely cleared browser cache (using the clear browsing history in chrome) between tests and have used multiple computers to test this, yet the results are the same.
The page I am illustrating is very small, but other larger pages fair worse and can grow upwards of 600KB, due to this oddity.
The odd bundling behavior was finally resolved!
My local project was set to use "https" by default. However, when browsing my production site on Azure, I noticed it was using standard "http". Once I enforced all pages to be routed through "https" in Azure, my CSS was now properly bundled, linked and cached.
- As a disclaimer, I honestly have no idea why this works, but it clearly is a fix for my particular problem. If anyone can explain the "why", please feel free to do so.
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.