I have a SPA project in VS 2013 using Angular.js and HotTowel and Breeze. It works fine on my development machine but when I deploy it to IIS 8.0 on a webserver running Windows Server 2012 it fails. The framework loads but it does not load my default view. It simply flashes the splash page and shows an empty browser.
I can walk through the js code using the Developer Tools but it never loads my default view into the index.html.
Using the developer tools in IE, I set breakpoints in the config.route.js to walk through the process of determining what page will be loaded into the SPA. It appears to be coming up with the correct page. The page that is supposed to load is called request.html so I also placed a breakpoint in the request.js to see if it was failing on the load. It never hits this breakpoint.
I am hoping that perhaps somebody has run into these same or similar issues when deploying an SPA to IIS.
Thanks for any help that can be given. In the meantime, I will keep searching.
JG
Success at last! As stated in the comments I found there were some path issues in the index.html. I managed to fix the problem by removing the leading '\' from the data-ng-include for the shell.html.
Was:
<div data-ng-include="'/app/layout/shell.html'"></div>
Now:
<div data-ng-include="'app/layout/shell.html'"></div>
This enabled the code to find the proper directory level for the shell.html. I was concerned that this would break the code for the dev environment but it works fine.
I then found that I needed to fix similar paths in the directives.js file in the function for the ccWidgetHeader. The templateUrl had to be modified.
Was:
/app/layout/widgetheader.html
Now:
app/layout/widgetheader.html
Finally I had to modify the style.css to fix a path for a logo image in the header.
Was:
.navbar .brand {
background: url(/content/images/fcma-biostar.png) no-repeat left center !important;
margin-left: -6px;
padding: 35px 50px;
}
Now:
.navbar .brand {
background: url(images/fcma-biostar.png) no-repeat left center !important;
margin-left: -6px;
padding: 35px 50px;
}
Many Thanks! to PW Kad and fops for chiming in on this issue!
well just a guess, of course a blank screen can be caused by way more reasons that the one mentioned here.
in my case i had to turn off the minification in the BundleConfig.cs code:
BundleTable.EnableOptimizations = false;
(consider this as a workaround. To fix it definitely its worth a try to check the dependency injection part of your angular code)
Related
first ever post from me. Here it goes.
I have installed Visual Studio Code and wanted to create my first React app. I read through the documentation, used Syntax:
npx create-react-app my-react-app
Also used npm start
I get the Compiled successfully! message in the terminal. The http:localhost3000 page opens in a new tab. The React logo is displayed. For what ever reason the React logo is a static image for me. I edited text in the page's P tags and they update in real time. The Live Server extension seems to work as well.
Just about every tutorial on video has that logo spinning. My concern is not having React or even Visual Studio Code setup correctly from the beginning. I've tried uninstalling and reinstalling 3x now. I get the same static image.
Any thoughts, experiences, or even conspiracy theories? Does the React logo spin for you? or static like mine? Is there any way I can make it spin every time I create a new React App? Every time my code is not working (do to my code most likely) I keep thinking about the React Logo.
node version 14.16.0
npm 6.14.11
I also got the same static React logo and here is how I fixed it (on Windows VM)
Symptom:
When you try the tutorial on https://reactjs.org/docs/create-a-new-react-app.html,
an animation effect settings of Windows may prevent the React Logo from spinning,
try either (1) or (2)
(1) [How to fix and make the react logo spin -- by changing Windows system setting)
Go to Window's Advanced setting system setting -> Performance Options,
Check "Animate controls and elements inside windows"
(As soon as you check this setting and apply, you can see the react logo start spinning.)
(2) [remove the part that is affected in the code by the above setting] (fix from inside css code)
Remove line 10 " (prefers-reduced-motion: no-preference) " from src/App.css
for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-reduced-motion
Looks like method 2 always works no matter what animation settings you have on your system. But as a tutorial, you might want to avoid making changes to the original source code from the beginning.
Had the same problem and this worked:
In App.css, on line 10, delete the line containing " (prefers-reduced-motion: no-preference) " and the closing bracket 3 lines below it.
I had the same issue on Windows 10. Found this link: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-reduced-motion
And used this line to get it working:
In Windows 10: Settings > Ease of Access > Display > Show animations in Windows
So as I said in the comments, no need to be concerned about the animated logo. Just an SVG file.
You can create your own as well Check here
Also, I generated a new project, and my logo spins.
First, check if you have the logo.svg file and then check
your App.css file.
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Also, you need to have them imported on your App.js,
both .css and .svg
Delete only part ": no-preference" from line 10. It should be "#media (prefers-reduced-motion)", then the logo is spinning (at least mine).
Question
How to quickly test different fonts in a React project?
Overview
I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:
body
font-family: Roboto, Helvetica, Arial, sans-serif
font-size: 16px
Desired outcome
I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.
For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.
What have I looked at?
I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.
I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how.
Thanks for any help showing how I should approach this.
Let me kick my answer off with a warning:
Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.
Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic #font-face declarations, or Kyle Matthew's typefaces packages, for example.
Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.
1. Get a link to embed your fonts client-side
First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:
https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat
2. Embed the fonts on your Gatsby site
To embed the link on your Gatsby site, you have two choices:
using <link>
You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.
In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
<HelmetDatoCms
favicon={data.datoCmsSite.faviconMetaTags}
seo={data.datoCmsHome.seoMetaTags}
>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using #import
You can import a remote font in CSS (or SASS):
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.
In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.
3. Use the fonts in your CSS
Third, no matter if you chose the <link> or the #import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.
You'll want something like this:
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3 {
font-family: 'Great Vibes', cursive;
}
Issue: styles applied to class names generated by Material-UI / JSS are incorrectly changing when components are re-rendered.
Setup: I'm serving a React app (built with create-react-app) that uses Material-UI jss styling and a Rails back end. I'm not sure how relevant the Rails part is since the same thing happens when I open the build/index.html file directly on my local machine -- the Rails back end handles the root request to serve the static client files as presented here. In either case, the static build is created using npm run build, which runs react-scripts build (from create-react-app).
Example of the issue: I have an <img> element which is given className: {classes.logo}. When built, classes.logo is "jss3", which takes on the following correct CSS:
.jss3 {
height: 50px;
position: relative;
// [...more]
}
This looks like this -- the <img> component is at the top left in the app header.
I "continue as guest", and new components are rendered. But notice the logo image, which now has new styling:
What happened? The <img> component now shows the following styling:
.jss3 {
height: 2em;
padding: 7px;
overflow: scroll;
position: relative;
}
This css comes from an entirely different style object from a different component:
// FileEntry.js
fileEntry: {
position: 'relative',
padding: '7px',
height: '2em',
overflow: 'scroll',
},
From logs, I've determined that both classes.logo in AppHeader.js and classes.fileEntry from FileList.js are given the name "jss3". So that explains why the styles changed -- a new component (<FileEntry) was rendered and it overwrote the "jss3" class styles.
So the root question at the moment is: why are both style elements given the conflicting name "jss3"? How can I avoid this with a static front-end app? (The issue also occurs when I follow the instructions from the blog post above to deploy to heroku.) I'd love an answer that still allowed me to host both client and back-end from a single running instance as I'm doing here, but if another deployment setup is the best answer then I'd love to learn how + why.
The issue is related to using two different versions of a class name generator. Many ways to do this; in my case I was mixing an older version of material-ui/core/styles#withStyles with a newer material-ui/styles#makeStyles as I was refactoring class components to use hooks. By removing usage of the older core/styles#withStyles, I fixed the issue.
What happens is the two style classname generators don't know about each other, and create class names with simple indexes (e.g. jss3). At least, they do this for production builds, it seems there use more verbose component-name-based class names in dev builds, which explains why I was only seeing it when hosting statically.
Since the FileEntry component was not rendered until login, the jss3 class name was not generated by the second class name generator until after the login action, at which point the jss3 class was given updated styling, and the browser applied it to the existing jss3 elements as it is meant to do.
Some workaround solutions involved forcing both to use the same Jss Provider, but not using independent invocations of class name generators in the first place was a more thorough and well-supported solution.
Similar issues are documented here:
https://github.com/mui-org/material-ui/issues/8223
https://github.com/mui-org/material-ui/issues/11628
I've faced this problem after migrating to the new material-ui version (5).
This should help you if you have the same issue
https://mui.com/guides/migration-v4/#migrate-from-jss
https://github.com/mui-org/material-ui/blob/master/packages/mui-codemod/README.md#jss-to-styled
Using boxsizing.htc is not working for me. The answers to other posts here on Stack Overflow have not worked for me:
Zerb Foundation 3 - IE7 Fix not working?
Making Zurb's Foundation 3 work with IE7
Here's what I did:
Created the boxsizing file in TextEdit, put the code there, named it boxsizing.htc, saved as Unicode 8.
Uploaded to my javascripts directory, at my domain root.
Added this to my stylesheet:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(http://mydomain.com/javascripts/boxsizing.htc);
}
Added this to the htaccess file:
AddType text/x-component .htc
To be safe, I made sure that jquery and modernizr are linked before the stylesheet is, just in case the htc file needs jquery.
Still no results. Any ideas?
The site is http://bureauforgood.com/index.php
Thanks!
Have you tried using *behavior: url(/javascripts/boxsizing.htc);?
I had to fiddle with the path to get this working.
whats the default padding for a jquery button? tried to download and search the dev pack... :( did not fint it :(
From the stylesheet:
.ui-button-text-only .ui-button-text {
padding: .4em 1em;
}
As one of the commenters mentioned, it's very easy to find this out by using the firefox plugin firebug, or by using the web inspector in Safari/Chrome