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
Related
So, I am trying to use Bootstrap in a React app. The Bootstrap CSS works properly, but anything that requires Bootstrap JS files doesn't work (dropdowns, modals, etc.) This is my code. I even tried copying the starter template and using that instead. It doesn't work.
<!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" />
<!--
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>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</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`.
-->
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<!-- FontAwesome JS -->
<script src="https://kit.fontawesome.com/8f8a8c35a9.js" crossorigin="anonymous"></script>
</body>
</html>
What am I doing wrong? Thanks for all your help! :)))
You are using different versions of Bootstrap for CSS and JS
5.0: https://getbootstrap.com/docs/5.0/getting-started/download/#cdn-via-jsdelivr
4.6: https://getbootstrap.com/docs/4.6/getting-started/download/#jsdelivr
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 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
In order to include everything I need from each bower component I user a library that does just that (it creates script and link tags for each new component I install and puts them in my main blade):
welcome.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}" style="height: 100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Work Web App</title>
<link href="{{mix('css/app.css')}}" rel="stylesheet" type="text/css">
<!-- bower-css:start -->
<link href="../assets/bower_components/bootstrap-social/bootstrap-social.scss" rel="stylesheet">
<link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="../assets/bower_components/components-font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="../assets/bower_components/bootstrap-social/bootstrap-social.css" rel="stylesheet">
<!-- bower-css:end -->
</head>
<body style="height: 100%">
<div id="root" class="container-fluid wrapper" style="background: #EDF1F5; height: 100%"></div>
<script src="{{mix('js/app.js')}}" ></script>
<!-- bower-js:start -->
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/bower_components/jquery/dist/jquery.js"></script>
<script src="../assets/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- bower-js:end -->
</body>
</html>
But whenever I try to access my app I get:
GET http://*****.test/assets/bower_components/bootstrap-social/bootstrap-social.css net::ERR_ABORTED
GET http://w*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/jquery/dist/jquery.js net::ERR_ABORTED
GET http://*****.test/assets/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found)
My configuration for my .bowerrc file:
{
"directory": "resources/assets/bower_components",
"scripts": {
"preinstall": "bowinst preinstall %",
"postinstall": "bowinst install %",
"preuninstall": "bowinst uninstall %"
}
}
Laravel comes with a package.json. All JS deps can be installed by npm install and will be downloaded to node_modules folder of your root directory.
To built the JS (uglify, minify and some other stuff) you can use Laravel Mix via npm run dev (for development), npm run watch (for building in dev mode but with a file watcher) or npm run production (for production).
The entry point for all this is resources/assets/js/app.js. There the bootstrap.js file will be imported. (Mind the name here. It has nothing todo with the CSS framework).
Any JS lib you want to include in your application should be required there.
You can find more in-depth information at https://laravel.com/docs/5.5/mix