I am using Heroku - Yeoman - AngularJS Full-Stack - Bootstrap - NodeJS Stack.
Deployment on Heroku is built using 'Grunt build' command. When deployed to Heroku I am having problems rendering CSS images on web pages. Any images within the page are displayed but not from the CSS files.
Eg: the code below does not work
CSS
.aboutpage-header
{
height: 250px;
background: url('../images/slider-map.jpg') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding-top: 50px;
}
HTML:
<header class="aboutpage-header">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<h2 class="title">About Us</h2>
<h2 class="intro"><i class="fa fa-location-arrow"></i>Company<span class="highlight">IT</span>
are experts in bespoke software development and tailored consulting</h2>
</div>
</div>
</div>
</header>
locally it works fine when running Grunt serve but as soon as it's deployed on Heroku the CSS images are missing.
As suggested in the comments, the link should be:
/assets/images/image.jpg
instead of:
../assets/images/image.jpg
Related
I made a 3D design using Spline and I added to my application, when I run the application locally using
npm run build it works perfectly I can see the design and everything. However, when I try to deploy the application on the internet the Spline design will disappear I don't understand why this is happening, I have deployed the application to Vercel, Firebase, and Heroku. My application is a React app with Node.js.
<div className="relative" id="home">
<Spline scene="https://prod.spline.design/0TUuMfCgXS3Xkkuo/scene.splinecode" />
<div className="absolute bottom-10 w-full flex justify-center items-center">
<div className="shadow-md p-4 flex items-center justify-center bg-zinc-900 rounded-3xl ">
<p className="text-white">Press and drag to orbit</p>
</div>
</div>
</div>
It works with iFrames without server-side rendering. You have to wrap it inside a component. You can import that component with dynamic from 'next/dynamic':
const IFrameComponent = dynamic(() => import('path/to/component'), {
ssr: false,
})
I used Sendgrid api for email template and in one of email has some confirmation functionality and for that I used an anchor tag which is redirecting to backend server and then backend api did all stuff. It is working fine, but some of outlook clients are complaining that they are not redirecting to the correct address.
I got the link from the client (outlook) which is something below:
https://owa.nexus.ox.ac.uk/owa/redir.aspx?SURL=u16WQnU.......
but above link is wrong and in sendgrid the link should be something like below:
https://u3550765.ct.sendgrid.net/wf/click?upn=hj8lklPLwDMw.......
Can anyone help me and suggest me either it is sendgrid issue in Outlook or it is something related to Outlook setting ?
Below is the email template:
<div style="width: 500px;margin: auto;margin-top: 37px;">
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;color: #fff;height: 40px;border: none;border-radius: 5px;line-height: 2.9;text-align: center;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
ACCEPT
</div>
<div class="rest-btn" style="display: inline-block;margin: 10px;width: 200px;height: 40px;border: none;border-radius: 5px;color:#ffffff;line-height: 2.9;text-align: center;padding: 0px;border: 1px solid #ccc;padding: 0px;background-color: #4dbc39;">
DECLINE
</div>
</div>
I suspect the issue is you're using Outlook specific HTML (VML) to generate buttons. SendGrid doesn't wrap those links, which is why that isn't working.
It would be helpful if you could post a sample of the HTML you sent. Then we could confirm if that's the issue.
I want to create a website along with its hybrid app using Ionic, I checked ionic's documentation http://ionicframework.com/getting-started/, I created an ionic app for tabs but I also want to handle my website with it so that if the request is coming from web then normal HTML should be served with web frameworks like foundation and I dont want to repeat the code for mobile and web. when I checked the files generated by ionic, it looked like this
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
So is it possible to use the same code for web and app(foundation for web and ionic for app)
yes you can!
you can use ionic platform add browser
then you need to add to your node js server.
Ionic as a web server
I would simply like have a link to a different page. But when I use:
<div style="position: absolute; top: 230px; width: 600px;
left: 250px; height: 120px">
<h2>
<a href='cgoogle.html'>
Sign in with your Google Account
</a>
</h2>
</div>
The link does nothing. I read that the solution is geturl, but I have no idea how to implement this. Does anyone have an example?
If what you want is open the link in the default browser (note that this may be not Chrome on the user's system), then add target="_blank" to your link:
<a href='cgoogle.html' target="_blank">
Sign in with your Google Account
</a>
However, it looks like what you're trying to do here is authenticate the user. The proper way to do that is to use the Chrome Identity API. You can read more on Chrome user authentication in general here (the API page also has this link).
If all that seems a little daunting, this app sample should get you off the ground.
Also note that "link does nothing" is not exactly true: it prints an error to the console, in addition mentioning the target="_blank" thingy. When you're developing Chrome apps, using the console is imperative (both the background page and foreground page ones) - it often provides very useful feedback on what's going on.
I have created one Google chrome extension for my site. I need to be installed this extension automatically while I am running my webpage on browser.. I want to place the packed extension in my own site. is it's possible to host my extension in my own site. Please advice me how I can install that extension automatically while I am running my page and also how it is possible to host in my own server.
Thanks in advance..
You should use Inline Installation for users to easily install your app.
You can create a simple popup that redirect to the site with code as follows
<div id="p2r_addon_inst" class="myclass">
<div id="chrome_info" style="display: block; top: 0px;">
<div id="addon_install_icon"></div>
<span id="addon_install_message">Chrome extension is available for this site More info... </span>
<div id="addon_install_buttonblock">
<div id="addon_install_remove"></div>
<button id="addon_install_extinstallbutton">Install</button>
<button id="addon_install_dontaskagain">Don't ask again</button>
</div>
</div>
</div>
and the css is
.myclass{
position: absolute;
left: 0;
top: 0;
width: 100%;
overflow: visible;
z-index: 999;
}