how to use bootstrap files in Apache cordova apps?
Is there any setting to do
in visual studio 2015 css intellisense not working
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
First, you need to download the bootstrap.css or bootstrap.min.css file. Then you can reference it in your index.html file:
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--reference bootstrap.min.css file here -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>BootStrapDemo</title>
</head>
<body>
<div class="app" style="">
<button class="btn btn-danger">BootStrap Button</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
in visual studio 2015 css intellisense not working
I guess you didn't reference it correctly. If you referenced it correctly, you will get the intelligence like this:
Related
I have a react application , which I created with Create React App. The app is working fine in development, but in production , the CSS styles are not getting applied. I noticed that, the generated index.html file has the link tag for the bundled stylesheet (main.e72c9739.css), but browser is not downloading the CSS ( there is no network invocation in the dev tools ). The file does get downloaded, when I try manually by entering the address of the URL.
Here is the index.html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<base href="/proxy/myusername/services/someserviceid/proxy/8098/"/>
<link rel="icon" href="favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="logo192.png"/>
<link rel="manifest" href="manifest.json"/>
<title>React App</title>
<script defer="defer" src="/proxy/myusername/services/someserviceid/proxy/8098/static/js/main.01dd9c66.js"></script>
<link src="/proxy/myusername/services/someserviceid/proxy/8098/static/css/main.e72c9739.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<h1>Hello</h1>
</body>
</html>
One difference I noticed was, in case of development, the css is not explicitly referred via link tag, all the CSS definitions are available in the bundle.js file (along with some code of CSS_LOADER_EXPORT module).
P.S. The application is deployed in a subpath, and I am using nginx for forwarding the request to react app running on a different port. I also do response modification for appending the base path of the URL.
I have ubunto server working with nginx,
and after running npm run build in my react project, the build directory created with the path static/css/main.ca4e3296.chunk.css -> and that is the main css file of the project.
After ftp that build directory to the server, I checked this file and it transfered successfully, but on the production it's value is all the index.html content (I have no idea why).
I also copy paste all the static/css/main.ca4e3296.chunk.css file's content from the server to the browser and it's all the css worked again, which means the problem here is that file that it's value changes from the server to the browser.
Also, in the console, I get this message:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://bucard.co.il/static/css/main.ca4e3296.chunk.css".
By the way, this is my index.html page if it's couses the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="canonical" href="https://bucard.co.il/" />
<link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Assistant:wght#300&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="title" content="Bucard | Digital Business Card" />
<meta name="description"
content="Bucard - Digital Card Website" />
<!-- some analytics -->
<meta property="og:locale" content="he_IL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="https://bucard.co.il/favicon.ico" />
<meta property="og:description"
content="Bucard - Digital Card Website" />
<meta property="og:url" content="https://bucard.co.il/" />
<meta property="og:site_name" content="Bucard" />
</head>
<body>
<div id="root"></div>
</body>
</html>
Any help please ? Or maybe it's Nginx problem?
This problem causes only on production.
edit: Just saw that removing GENERATE_SOURCEMAP=false from .env file solved the problem, but the components are shown again. so that's temporary solution.
I just looked at the source code of your website, there's no CSS file named main.ca4e3296.chunk.css there.
It's probably the nginx routing settings that causes the redirect to your 404 page, which is fine.
You need to remember that with each new build the output files' names change, and the main index.html file is updated as well to link to the new files, so main.ca4e3296.chunk.css may have existed sometime in the past but not anymore. Currently, both 2.b42aba3b.chunk.css and main.a6f3b637.chunk.css are responding as expected.
If I were you I'd read more about your bundler (most likely Webpack)
I am developing Angular application with DotNet Core. In the development environment Application works fine, but upon publishing to IIS server receiving the following Error(Internal error while loading script file in index.html)
IMG->
Website Error image
IIS folder structure is a follows.
inetpub folder image
inetpub folder image
Index.html code is a follwos
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebPayzUI</title>
<base href="/WebPayz/ClientApp/dist">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.0243bd00007c5e1092e8.css"></head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.83183756596ff1996025.js"></script><script type="text/javascript" src="scripts.385b291e179030219400.js"></script><script type="text/javascript" src="main.e9e2c4382e2ff45e82db.js"></script></body>
</html>
base href="/WebPayz/"
update base href to the above in your index.html file
I am currently working on a asp.net 4.6.1 project.
I have used bundler and minifier extension to minify and it works as desired to minify files. I wanted to minify all the js and css files and set the reference links according to the environment.
This is not possible in ASP.NET 4.6.1
My main aim is that normal files should load during debug mode and minified files during production mode.
Something of this type :
<environment names="Development">
<link rel="stylesheet" href="~/css/file1.css" />
<link rel="stylesheet" href="~/css/file2.css" />
<link rel="stylesheet" href="~/css/file3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/bundle1.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/bundle2.min.css" asp-append-version="true" />
</environment>
I migrated a Rails 2.2.2 application to Rails 3.1.
In development mode: /var/www/project_dir# thin start --ssl
all the assets are found and served beautifully.
When I run in production mode: /var/www/project_dir# thin start --ssl -e production
all of the asset requests (JS,CSS and images) return a 404.
The paths in development and production mode are
identical.
I have come to the point where I have exhausted all of my debugging ideas and have no ideas why when in production mode, none of the assets can be found.
I did try migrating over to asset pipeline but that caused more problems that I don't think I can solve right now so I need to solve this with asset pipeline off.
Any and all ideas are welcome and THANKS!
Details
Web Server: Thin 1.5.0
Asset Pipleine: Off
Asset Directories:
/var/www/project_dir/public/images
/var/www/project_dir/public/javascripts
/var/www/project_dir/public/stylesheets
Generated Asset Paths (Development Mode)
<script src="/javascripts/jquery.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery.alerts.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/application.js?1366806357" type="text/javascript"></script>
<link href="/stylesheets/jquery-ui.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.alerts.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/default.css?1361279499" media="screen" rel="stylesheet" type="text/css" />
Generated Asset Paths (Production Mode)
<script src="/javascripts/jquery.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery-ui.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/jquery.alerts.js?1366806358" type="text/javascript"></script>
<script src="/javascripts/application.js?1366806357" type="text/javascript"></script>
<link href="/stylesheets/jquery-ui.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.alerts.css?1361279500" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/default.css?1361279499" media="screen" rel="stylesheet" type="text/css" />
Apache would do this automagically for you but with Thin, you need to do the following:
In /config/environments/production.rb
Set this directive to true:
config.serve_static_assets = true
That will enable production mode to read assets from the /public folder