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!
Related
I installed bootstrap using NPM
In a normal svelte project I usualy add bootstrap and other packages, which are used project wide, in the App.ts file. However, in a SvelteKit project there is no main entry point.
So what is the recommended way of adding bootstrap 5 or other packages to SvelteKit globally?
I don't want to use rollup plugins, but rather just want to import it as an module in JavaScript
As of SvelteKit 1.0, the easiest way I found to add static scripts and styles that will be available everywhere is to add them to
src/app.html
That is the file that includes everything else including the <html> tag, so you can place the styles in the <head> and the scripts in the <body>, including CDN URLs, like you have always done before.
This setup allows you to easily override Bootstrap settings, e.g. I added a style to unset the <body>'s background-color that is set by Bootstrap.
To host the scripts yourself rather than use a CDN, put them in the src/static directory and reference them using the prefix %sveltekit.assets%/. For example, I placed the files bootstrap.min.css and bootstrap.bundle.min.js in src/static/bootstrap-5.0.2/ so now my src/app.html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link href="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.min.css" rel="stylesheet">
<style>
body {
/* override Bootstrap */
background-color: unset;
}
</style>
</head>
<body>
<div style="display: contents">%sveltekit.body%</div>
<script src="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.bundle.min.js"></script>
</body>
</html>
If you want to use a CDN instead of self hosting the files then for e.g. for Bootstrap 5.0.2 you can use the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
You can make a top level __layout and import everything there.
I add this because this seems to be a good way for adding packages to a SvelteKit app.
https://github.com/svelte-add/svelte-add
If you want to add Bootstrap for example use
npx svelte-add#latest bootstrap
As of date of writing this, there are not alot of packages yet, hopefully that changes in the future.
Firstly run npm install bootstrap inside your sveltekit project.
Then
In your root +layout.svelte put
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
</script>
References
https://vitejs.dev/guide/features.html#css
https://vitejs.dev/guide/assets.html#explicit-url-imports
Here is my code in the index.html. It's just a simple create-react-app and I added some script tags for firebase. Not sure why the index.pack.js script tag is saying a syntax error for some reason.
<!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="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<!--
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" />
<!--
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>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>
<script src="/src/index.pack.js"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
This line right here is saying there's an error and I don't know how to fix the code since it's a script tag and supposedly it's reading it wrong
<script src="/src/index.pack.js"></script>
You are missing . at the beginning of path.
<script src="/src/index.pack.js"></script>
Should be
<script src="./src/index.pack.js"></script>
I'm trying to add dynamic meta-tags on every single page. But still can't see my meta-tags on my page source code. Do I need to put something in public/index.html... I'm not using server
I'm trying to add dynamic meta-tags on every single page. But still can't see my meta-tags on my page source code. Do I need to put something in public/index.html... I'm not using server
I'm trying to add dynamic meta-tags on every single page. But still can't see my meta-tags on my page source code. Do I need to put something in public/index.html... I'm not using server
Example:
Home page
import {Helmet} from 'react-helmet';
export default class Home extends Component {
render() {
return (
<div>
<head>
<Helmet>
<meta charSet="utf-8" />
<title>Home</title>
<link rel="canonical" href="https://example.com/" />
<meta name="description" content="Some description here" />
</Helmet>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
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" />
<!--
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>Website</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
You should use React-helmet for this as react-meta-tags is outdated.
As the documentation example shows:
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
I am building my Ionic application for production. To do so, I am using ionic build --prod command and the application is building successfully, But when I am running my application on the server then it is giving me errors of:
cordova.js, main.js, Vendor.js.
(Please ignore the errors of Firebase)
The screenshot of network tab is:
As I am seeing my build folder, there are only two files that are generated after running the above ionic command i.e Pollyfills.js and 'sw-toolbox.js'.
But when I am using Ionic serve command then the build folder consists of all the files viz Pollyfills.js, main.js, main.css, vendor.js and 'sw-toolbox.js'.
I have already tried the various commands like :
ionic cordova build android --prod --release but it also results in only two files in Build folder and hence giving an error on console.
What is the issue and how can I make this app suitable for production mode.
Kindly have a look on my index.html file where I am giving the paths of various js files:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>BOS</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000">
<!--Share this Code -->
<script src="//platform-api.sharethis.com/js/sharethis.js#property=5b1fb235e4b7fb00118c596f&product=sticky-share-buttons"></script>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href= "assets/imgs/logoSplash.png",>
<link rel="apple-touch-startup-image" href="assets/imgs/logoSplash.png">
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>
<link rel="preload" href="build/main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<noscript>
<h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
Sorry, but app is not available without javascript
</h3>
</noscript>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
I have found the solution of my problem. I went to the node_modules -> #ionic -> app-scripts -> config -> webpack.config
In that file, I had commented one line of code :
function getProdLoaders() {
if (process.env.IONIC_OPTIMIZE_JS === 'true') {
// return optimizedProdLoaders; <= This one
}
return devConfig.module.loaders;
}
Now, it is working.
I'm finally trying to implement some of the stuff i've been reading about with Bootstrap and React.
I started this React tutorial:
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
The hello world app works fine. Now i'm trying to insert some bootstrap code into this hello world app and i'm already bumping into issues.
I added this code in my index.html in the head tag:
Index.html code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css.site.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 - Test Title</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
also, the App.js file looks like this (with React)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<body>
<div className="container">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</body>
);
}
}
export default App;
However, the page renders without bootstrap. it looks like this:
One of three columns
One of three columns
One of three columns
class is a reserved word in JavaScript, so you can't use that in JSX. The proper syntax is className.
The class attribute is a javascript word, so React has implementedclassName, which in the end is the same thing.
You can take a look at React's own documentation:
https://reactjs.org/docs/dom-elements.html#classname
Sorry my english :D