I setup my first elm project with parcel for automatic rebuild and hmr, however, hmr is not working when I edit .elm files. It works if I change anything on the html or js side. Any hints?
Just did
npm install -g parcel-bundler
parcel index.html
Followed this guide - https://parceljs.org/elm.html
package.json
{
"devDependencies": {
"elm-hot": "^1.0.1",
"node-elm-compiler": "^5.0.3"
},
"dependencies": {}
}
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Photo Groove</title>
<link rel="stylesheet" href="http://elm-in-action.com/styles.css">
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>
index.js
import { Elm } from './PhotoGroove.elm';
Elm.PhotoGroove.init({
node: document.getElementById('app')
});
Related
I need to change the structure of my files when I put in production :
default :
-dist
--css
--fonts
--img
--js
--favicon.ico
--index.html
and i want like this :
-dist
--index.html
--app
---css
---fonts
---img
---js
---favicon.ico
I try to change directly the html in index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="app/favicon.ico">
<title>Roquette</title>
<script defer="defer" src="app/js/chunk-vendors.6e8aa085.js"></script>
<script defer="defer" src="app/js/app.4955a200.js"></script>
<link href="app/css/app.d0b83381.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but serveur-roquette doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div>
</body>
</html>
But it doesn't work there must be some paths missing somewhere
I'm trying to decrease the bundle size of my Vue project, which scaffolded by the vue-cli, by using CDN of firebase, Vue, and Vuetify.
So, I've added links of these CDN in public/index.html as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>magiclabel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but t4v4 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Add config.externals to vue.config.js as follow:
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
config.externals({
firebase: 'firebase',
'firebase/auth': 'firebase',
firebaseui: 'firebaseui',
vue: 'Vue',
vuetify: 'Vuetify',
'vuetify/lib': 'Vuetify',
})
}
}
Then, the report.html created by issueing yarn build --report indicated that the Vuetify is still in the bundle even other firebase and Vue is going away as follow:
Is there any wrong or insufficient steps?
If you are using vuetify from vue-cli-plugin-vuetify (vue add vuetify), treeshaking and auto component import is enabled by default, by using vuetify-loader.
If you look into the source code of vue-cli-plugin-vuetify, it only uses vuetify-loader if it is present in your package.json. So removing vuetify-loader from package.json should disable this behavior.
I would like to run locally a Vue.js/System.js demo app I just got recently, never used System.js before (and I'll not...)
I only want to run this demo, before switching it to webpack...
There is no npm script (so no install, no run dev)
How should I run it to display in my local browser?
Anything to do before running? (there is no documentation on it..)
demo
app
components
About
App
..
index.js
routes
Home
...
index.js
style
main.css
assets
home
...
...
documentation
...
libs
favicon.ico
index.html
readme.html
UPDATE
Here is the system.config:
System.config({
defaultJSExtensions: true
, map: {
'app': './app'
, 'js': '/libs/js'
, 'style': '/libs/css'
, 'theme': '/app/theme'
, 'babel': '/libs/js/babel-core'
, 'components': '/app/components',
'routes': '/app/routes',
},
transpiler: 'babel'
, meta: {
'js/*.js': {
format: 'global'
}
}
});
System.import('/app/index.js');
And the index.html:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="author" content="BelosTemas">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test template</title>
<link rel="shortcut icon" type="image/png" href="favicon.ico" />
<link rel="stylesheet" href="./app/style/main.css" id="theme-stylesheet">
</head>
<body>
<div id="app">
<app></app>
</div>
<!-- system -->
<script src="/libs/js/system.js"></script>
<script src="/app/system.config.js"></script>
</body>
</html>
UPDATE 2
I changed the script src paths in the index.html relative paths (src='./)
now the script file is located .. but it's not executed correctly, CORS related issue ..
Error:
system.js:5 Failed to load file:///app/index.js: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, https.
I solved it , installing a lightweight web server
npm install -g live-server
then in the console, going to my app directory, I just run it
live-server
default browser is open with http://localhost:8080
bonus : hot reloading !
I am trying my first ng-build to run my project from a remote servor (Ubuntu with Apache), so I am in my local project then I do my ng build command then it create a "dist" folder. That folder I place it in my var/www/html folder without any error...so when I run my servor IP point on the index.html the only thing I can see is...Loading AppComponent content here ...
If anyone could help could be great
Here's the error I've got:
Here's my index.html generate from ng build:
<!DOCTYPE html>
<html>
<head>
<title>MIAMI</title>
<base href="./">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
I am stymied by this issue. For some reason the Angular routing is not working at all. I simply get a blank screen. All of the modules are loading, there is no error in the console, and if I enter Angular in the console, it works. Yet, I get a blank screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuickCalcs</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" href="css/ng-animation.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/factories.js"></script>
<script src="controllers/qcController.js"></script>
</head>
<body ng-app="qc">
<div ng-view></div>
</body>
</html>
-----------------------------
app.js file is:
-----------------------------
var qc = angular.module('qc', [
'ngRoute',
'ngAnimate',
'ngResource'
]);
qc.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/home', {
templateUrl: 'views/home.html',
controller: 'qcController'
}).
when('/results', {
templateUrl: 'views/results.html',
controller: 'qcController'
}).
otherwise({
redirectTo: 'views/home.html'
});
}]);
-----------------------------
Directory structure is:
-----------------------------
qc
/js
app.js
/views
home.html
results.html
/controllers
qccontroller.js
You must link your page to the application module
in the html tag like this:
< html lang="en" ng-app="qc" />