I need to run a Svelte app and be able to execute it without a server.
With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte
I need to run a Svelte app and be able to execute it without a server. With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte
I'll break it down into two components, building and executing the svelte app.
Firstly, you require a computer to build the Svelte app as it executes rollup (and runs a node server) to perform the compilation, but this isn't what the OP is asking for...
To address the execution of the Svelte app, you can execute this without a running server.
Please see attached
You are given a npm run build from the Svelte create-svelte app generate command which outputs a public.html.
This can be used to host the file say, on Surge.sh, however to make this "local file friendly", You will need to edit the outputting html to the following (i.e. remove base /).
original source index.html
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
Final html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='favicon.png'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='build/bundle.js'></script>
</head>
<body>
</body>
</html>
If you're using Svelte (not SvelteKit) and has a single page only. You can use https://github.com/richardtallent/vite-plugin-singlefile to merge everything into one file on build, and it will then work through file://
Related
None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!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>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project 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>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.
I wrote a .html file that uses css(style.css) and javascript(app.js).
When I transferred the folder containing the index.html,style.css and app.js over to my android internal memory,the browser runs the html file but my .css and .js files are not detected.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="style.css" rel="stylesheet" >
</head>
<body>
....
</body>
<script src="app.js" charset="utf-8"></script>
I have tried using "/style.css" and "./style.css".
But none of them are helping in detecting the files.
Inline styles in the index.html file work fine and show up in my browser.
Using Chrome on Android 8.1.0 (MIUI 10.1|Stable)
You can load your files somewhere in your device like this :
file:///storage/emulated/0/MyDirectory/index.html
file:///storage/emulated/0/MyDirectory/style.css
file:///storage/emulated/0/MyDirectory/app.js
And then try to address thoes in src and href.
For testing purposes you can also use applications that let you run local servers on your device, like this one: https://play.google.com/store/apps/details?id=com.esminis.server.apache
I am building a web app with Angular 2 framework and I want to use an external template. Trying to convert it into an angular2 SPA.
I need to run some scripts (custom.js). All CSS and JavaScript file are added in Index.html.
Everything is working fine except external js. JavaScripts are not working properly. But the CSS files are working. Material components and modals other JavaScript functionality nothing is working inside angular component file.
In your .angular-cli.json file you need to add the external js file under your app's scripts property.
{
// other app config
apps:[
{
// Your app config
"scripts":[
"path/to/your/custom.js"
]
}
]
}
If you would like to use the script in a component, you should declare it before the component class.
declare var customLibraryName: any;
See the Angular Cli Wiki for more details.
thanks #JosephDragovich for your fast reply. To be honest, I am a fresher in Javascript and angular 2. Following your suggestion, I updated my code as below:
javaScript not working
angular-cli.json
"scripts": [
"./src/assets/Js/jquery-2.2.4.min.js",
"./src/assets/Js/bootstrap.min.js",
"./src/assets/Js/jquery-ui.min.js",
"./src/assets/Js/jquery-plugin-collection.js",
"./src/assets/Js/custom.js"
],
my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LocumMedApp</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="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body class="has-side-panel side-panel-right fullwidth-page side-push-panel">
<app-root></app-root>
</body>
</html>
place script in index.html also using <script> tag.
I have started to build a demo project after learning React from some online tutorials.
Please consider the line of code below from a ReactComponent.
ReactDOM.render(<Home/>, document.getElementById('container'));
This renders the React component Home at the target DOM element container. All the tutorials online showed that this renders it in some index.html file. How does the code know, in which HTML(document) file to find the DOM element container. Below is the screenshot of the error I am getting.
Below is my index.html which is the default one from scaffolding.
<!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">
<!--
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>
<!--
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>
With React, as all JavaScript, it's loaded into the file via an HTML file (i.e., the HTML file comes first). Your JavaScript is usually imported with a <script> tag. It's that HTML file currently open in the browser that it should look in.
So, you should have something like this for your HTML file, which you open in the browser:
<!DOCTYPE html>
<head>
<script src="./src/Home.js"></script>
<body>
<div id="container"></div>
Opening that, assuming the JS path is correct, should work fine.
I've installed Angular for trying this out. I have node.js installed with npm, and I installed the #angular/cli package globally. Then I did: ng new testproject. I now have all the files installed. I did npm install and npm start and everything worked, even the app said so! (LOL).
Now, when I look into the files and see the index.html file in my ./src, there is not a lot of stuff going on.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testproject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
This feels strange. Angular is made with JavaScript (compiled Typescript). But when I look at the developer tools in Google Chrome, I can see that there are actually script tags inside my html.
Can someone explain me how these files got here? What is happening on the server-side, and which files make this happen? Thank you.
The <base href="/"> is the reference your looking for. If you build(ng build --prod), it will reference all the default complied scripts to this path, in the default case being root of your application.