<head>
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<script type="text/javascript" src="js/less.js"></script>
</head>
I get an error that it needs to be http:// instead of file://. So does this mean I have to install apache and/or node?
Are there any links to documentation? The less.css website isn't explicit enough for me.
Related
My question involves the index.html that is generated after ng build --prod. This is the one i get after running that command:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kudoshealth Dashboard</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="assets/css/all.min.css" rel="stylesheet" type='text/css' />
<link rel="stylesheet" href="styles.f0d4a2f6b4b57a8b1a74.css"></head>
<body>
<app-root></app-root>
<script src="runtime-es2015.5e3efc57355ca9fa37ac.js" type="module"></script><script src=""></script><script src="runtime-es5.5e3efc57355ca9fa37ac.js" nomodule defer></script><script src="polyfills-es5.c9393ad6cf868cd989cc.js" nomodule defer></script><script src="polyfills-es2015.70587aa54d3cd9f0a3b6.js" type="module"></script><script src="scripts.c19d1667b1375f71590b.js" defer></script><script src="main-es2015.654b4a3d66cfb9c8fa63.js" type="module"></script><script src="main-es5.654b4a3d66cfb9c8fa63.js" nomodule defer></script></body>
</html>
This angular project works fine on localhost, but once the dist output has been uploaded to the S3 bucket, there seems to be some issues such as this:
S3 deployed error
I ensure you that the login i am using is correct. All uploaded files are made public on the bucket too. The strange error is that there is no 8-es2015.8e909eab71372e40cabe.js file in the dist. Im really sorry if the error is obvious or if I'm making a rookie mistake, but I've been stuck on this error for a few days and any help would be appreciated.
My issue was a long persisting one in the background. The issues was resolved by changing my environment.prod.ts redirect url. It was set to an old one from a old branch on the repo that was redundant.
I am looking to add leaflets entire library to my project files instead of using the http link. I have followed the following instructions from leaflet :
My index.html is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Search UI"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/leaflet/leaflet.css" />
<script src="%PUBLIC_URL%/leaflet/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
You'll notice I haven't attempted to change the other leaflet components just yet. I use the %public_url% so that when the project is cloned, the path adjusts accordingly upon build. So in order to maintain this, I have put the leaflet library in the public folder. This causes an issue when I try to compile the JS file that utilizes the leaflet map.
This is how I used to import/use leaflet :
import * as L from 'leaflet'
import 'leaflet-draw'
import 'leaflet/dist/leaflet.css';
import 'leaflet-easybutton'
Now when I attempt to use the local libary instead, I run into the issue of
Module not found: You attempted to import ../../../public/leaflet/leaflet-src which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
After some investigation I saw there are ways to get around this, but I feel like there is a better way that I am simply missing.
My goal is to have import * as L from 'leaflet' use the leaflet library in the project files, not the leaflet that is still in my node modules. I will then apply the same logic to the css, and follow up with the rest of the leaflet components I am using.
The class file directory structure is project_name/src/Components/Map/MapSearch.js
Any insight towards a solution would be greatly appreciated. Thanks!
I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>
The reason to have src and dist folders is pretty clear: we change source code commit it to repository and use compiled dist files for production.
But what could you recommend for development? We still want to keep src clean from compiled file and make it very fast to review the changes.
Before we just transpiled SAAS into CSS and put it into source and keep JS files as they are(without compiling in one file or coping them to dist). And now we decided to rethink the concept.
we are doing web development, but I think question is more broad.
If I well understood, you are looking for a development architecture/workflow to directly serve you sources to the browser (and use DevTools edition features btw). In fact, there are 2 things to do to achieve this.
1) For compiled/transpiled languages (SAAS, LESS, TypeScript, ...) and unsupported languages (ES6, ES7), you will need to compile/transpile them on the client side. Tools like LESS.js, typescript.js, BabelJS are great to do that. I don't know any SAAS compiler implementation in Javascript.
2) Then, you need 2 different html indexes. For example index.hml for production and dev.html for development.
index.html with bundled (dist) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title</title>
<link rel="stylesheet" type="text/css" href="dist/app.bundle.css">
<script type="text/javascript" src="dist/app.bundle.js"></script>
</head>
<body>
...
</body>
</html>
dev.html with all sources (src) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title (Dev)</title>
<link rel="stylesheet/less" type="text/css" href="src/file1.less" />
<script type="text/javascript" src="src/file1.js"></script>
<script type="text/javascript" src="src/file2.js"></script>
<script type="text/javascript" src="src/file3.js"></script>
<script type="text/javascript" src="lib/less.js"></script>
</head>
<body>
...
</body>
</html>
This way, developers access the web app using, let's say http://localhost/dev.html and can enjoy all the goodness to have sources right in the browser. Without taking care of the compilation.
To apply such an architecture you may need to adapt client and/or server code and also build tools to work in both mode (prod and dev).
Hope I helped.
I'm trying to link manually my CSS and Javascript files to my HTML scripts, but I've never really done it with files from a different folder/directory. This is what I have so far:
<link rel="stylesheet" type="text/css" href="/Desktop/Script/CSS/tempeststyle.css"/>
<link rel=script" type="text/javascript" href="/Desktop/Script/Javascript/tempestscript.js"/>
I've read from a few sources that you don't have to start all the way at C:/Users or whatever the case may be for different systems, but I'm not sure if these links are acceptable the way they are (i.e., them starting at "/Desktop"). The files are in separate folders within the same folder on the desktop. So how to include them the best way? Thanks.
If you want to add scripts from local path you can use a relative path:
<link rel="stylesheet" type="text/css" href="../CSS/tempeststyle.css"/>
or relative path from your web root folder:
<link rel="stylesheet" type="text/css" href="/styles/CSS/tempeststyle.css"/>
or filesystem absolute path:
<link rel="stylesheet" type="text/css" href="file:///C:/Path/To/Scripts/styles/CSS/tempeststyle.css"/>
It is rather better if you use an absolute path from your web server:
<link rel="stylesheet" type="text/css" href="http://www.example.com/styles/CSS/tempeststyle.css"/>