I have followed the procedures outlined here in the Framework7 documentation to build a PWA with cordova. I'm on Ubuntu. Something happens when I cd my projects and run cordova in the browser. The cordova.js overwrites any html or custom js and I'm stuck here. If I remove cordova.js from the project, then I can use custom F7 js and css. Thing is, I'm building a Hybrid app for Android and Apple so I do need the cordova plugins and without cordova.js well this wont happen. Is this a catch 22 what's going on? I've built hybrid cordova apps before and this never happened.
structure of folders
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--app title-->
<title>MyApp | F7 Cordova App </title>
<!-- Path to Framework7 Library Bundle CSS -->
<link rel="stylesheet" href="css/framework7.bundle.min.css">
<!-- Path to Framework7 Library Bundle JS-->
<script type="text/javascript" src="js/framework7.bundle.min.js"></script>
<!--custom stylesheet-->
<link rel="stylesheet" href="css/app.css">
<!--JQUERY UI CSS-->
<link rel="stylesheet" href="css/jquery-ui.css">
<!--JQUERY-->
<script src="js/jquery-3.6.0.min.js"></script>
<!--JQUERY UI JS-->
<script src="js/jquery-ui.js" type="text/javascript"></script>
</head>
<body>
<!-- App root element -->
<div id="app">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Awesome App</div>
</div>
</div>
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<!-- Toolbar links -->
Link 1
Link 2
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content">
<p>Page content goes here</p>
<!-- Link to another page -->
About app
</div>
</div>
</div>
</div>
</body>
</html>
<!--scripts-->
<script src="cordova.js"></script>-->
<script src="js/app.js"></script>
I was going about this wrong. I treated Framework7 just like any other regular framework (ie : mobileui). It's a little different workaround if you want to make it work with cordova. I did with the framework-ui, it's best to just brute force with the framework-cli.
Install Framework7-Cli
npm install framework7-cli -g
Install Cordova
npm install cordova -g
Create project directory
mkdir myapp
Enter directory
cd myapp
Run Framework7-cli
framework7 create
Framework 7 CLI will ask you questions on how it should setup your app.
pick the following options:
1. Cordova app (target native iOS and Android).
2. Enter any name you would like to then enter
3. Just click enter on the App package (Bundle ID).
4. Pick Framework7 Core.
5. Tabbed Views.
6. No bundler.
7. No, use default color theme.
8. Yes, include icon fonts.
Let it work and finish...
Install http-serve in your myapp directory
npm install http-serve -g
Previewing the app in the browser
cd myapp/www
http-serve
NPM will give you 3 different addresses to see your F7 project
http://127.0.0.1:8080
http://192.168.0.101:8080
http://192.168.44.56:8080
To compile your Cordova app
npm run build-cordova-android
or
npm run build-cordova-ios
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!
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 have already built my Create React App and compiled it to a /build folder. I also have a website (on WordPress in particular) where I am hoping to add my app.
My problem is that I can only find documentation on how to publish the app as a single page HTML document utilizing the index.html file. I want to somehow include only the part between the app's <body> if possible.
What happens when I have a preexisting <div id="root"></div> element inside my plugin? I have already added the /build folder in plugins root as well.
The produced code is
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<title>React App</title>
<link href="/static/css/main.dd742552.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={2:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])
</script>
<script src="/static/js/1.a789a71a.chunk.js"></script>
<script src="/static/js/main.5d390abf.chunk.js"></script>
</body>
</html>
One thought, I suppose, is to use an iframe with a specific width/height but that ruins the responsiveness of the app.
Are there any other ways? Thank you very much
When you build your App with create-react-app it creates an index.html file that uses your App in that specific index.html file. So for example if you render your app in the <div id="root"></div> it will place the app in that div.
If you look at the bottom om the generated index.html file you can see that your React app is just a .js file that is imported at the bottom of the index.html file. The building process bundles everything into this one .js file. The whole React app is in that .js file.
So .. what you can do is take this .js file and import it where you want to use it in your Wordpress site. The one thing you have to remember is that you have to have a DIV that is named exactly the same as the one you mount your React app in. So if you mount it in a div named root like this : ReactDOM.render(<App />, document.getElementById('root')); You must have a div named root in the html document you import your build file into. Also make sure you place any subfolders with images etc that you use in your React app in the correct root folder.
Hope this clear things up. =)
so I'm creating a simple static site and I'm using ReactJs to create it. I wanted to implement a button that downloads a pdf file that I have in the resources folder of the project.
<div>
<a className="button is-info"
href="../resources/myFile.pdf" download>Download my CV
</a>
</div>
I opened the file that was downloaded. It has a .pdf extension but is a html file with the content posted below, where the bundle.js probable has the code of the current site.
<!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="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<!--
Notice the use of 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", "/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>My online CV</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`.
-->
<script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>
This is how I implemented the download, but as a response I'm getting a 1.6kb file. In the network tab in the developer tools response header returns a content-type: text/html.
I don't know how to continue with his issue and help is appreciated.