Trying to create my first vite.js app. after initializing the project and installing the dependencies i edited index.html to show a normal hello world, other files i left them empty.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="favicon.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Wolrd</title>
</head>
<body>
<div id="app">
<script type="module" src="./main.js"></script>
<h1>Hello Wolrd</h1>
</div>
</body>
</html>
However i edit index.html style.css or main.js , the localhost just keep showing the welcome page from vite.js, so i inspected the page and it looks like it still using the boiler-path template:
EDIT:
someone commented that main.js is the entry point of vite.js i edited too to show a simple hello world to no brainer...
import './style.css'
document.querySelector('#app').innerHTML = `
<h1>Hello World!</h1>
`
This is my files hierarchy:
if you need any more info let me know?
EDIT 2:
I was using MacOs mojave version 10.14.6
I changed to another Imac with the same os and version and it worked ...
In main.js you will see:
document.querySelector('#app').innerHTML = `
<h1>Hello Vite!</h1>
Documentation
`
Which replaces all which is in <div id="app"></div>
With
<div id="app">
<h1>Hello Vite!</h1>
Documentation
</div>
Vite bundler is placing/fixing the <script> at the end before body because its in the wrong place.
If you want Hello World! then you should change the content in main.js
document.querySelector('#app').innerHTML = `
<h1>Hello World!</h1>
`
Related
I am trying to use particle-js for my website. My code is quite simple, since it is the very first thing I tried to implement.
My project consists of 4 files: code.html, particles-config.json, particles.js and style.css. With the last one still being empty.
The code.html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="particles.js"></script>
</head>
<body>
<header>
<p>Test 1</p>
<div id="particle-div"></div>
<button id="particle-button">Start</button>
<p>Test 2</p>
<script>
$("#particle-button").click(function(){
particlesJS.load('particle-div', 'particles-config.json')
});
</script>
</header>
</body>
</html>
And the config file is just with the content from the one provided on this github under particle.json. And the particle.js is the exact same file from the github.
However when I run the code, I dont see the particles. It just opens up an empty white space between Test 1 and test2. I amlso not getting any error messages in the browser console (I use Firefox).
Could anyone tell me what am I doing wrong?
EDIT:
Here is a screen shot of the network tab:
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
i want to build applications with extjs, i downloaded the GPL version from sencha.com, in me html file i have the code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="../lib/extjs/build/resources/ext-watermark/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test ExtJs version 6</title>
<script type="text/javascript" src="../lib/extjs/build/ext-all-debug.js"></script>
<script type="text/javascript" src="../lib/extjs/build/ext-all.js"></script>
<script type="text/javascript" src="testExtJsscript.js"></script>
</head>
<body>
<h2>Test ExtJs</h2>
</body>
</html>
and in me testExtJsscript.js i have the code:
function mess(){
Ext.MessageBox.alert('info','Extjs4 est pret');
}
Ext.onReady(mess);
but the result is just like in the photo
i think that the problem is i haven't the right css file, in all documents there is a ext-all.css file and i can not find it?
I tried to install the trial version of sencha extjs, but the extraction is not working, i reach 42 % and i have problems (CRS faild) with *.png files
thanks for your help
The problem is that you are missing the css file. But anyway, you should not write the html file with the inclusion of the css and js files yourself. You should use Sencha Cmd right from the start, as #Evan suggests. http://docs.sencha.com/extjs/6.2.0/guides/getting_started/getting_started.html
The minimal html should be like this:
<!DOCTYPE html>
<html>
<head>
<link href="/ext/6.0.0/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
<script src="/ext/6.0.0/build/ext-all.js"></script>
<script src="/ext/6.0.0/build/classic/theme-triton/theme-triton.js"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.Msg.alert('Welcome', 'Hello, World!');
});
</script>
</body>
</html>
See my online demos here:
ExtJS 6 Hello World Application
ExtJS 6 Hello World Application Using Ext Loader
ExtJS 6 "Hello World" Application - Modern Toolkit
I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:
Uncaught ReferenceError: require is not defined
This is my html file:
<html>
<head>
<meta charset="UTF-8">
<title>Index page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="columns">
<div class="column">
some stuff
</div>
<div class="column">
<div id="index"></div>
</div>
</div>
<script type="text/babel" src="static/js/index.js"></script>
</body>
</html>
and my index.js:
import FormComponent from './FormComponent.js';
var MainClass = React.createClass({
render:function(){
return (
<div>
<div>this is the main component</div>
<div><FormComponent /></div>
</div>
);
}
});
ReactDOM.render(<MainClass />, document.getElementById('index'));
and finally the FormCommponent.js, which is in the same folder:
var FormComponent = React.createClass({
render: function() {
return (
<div>this is an imported component</div>
);
}
});
module.exports = FormComponent;
Does anyone know what am I doing wrong?
I'm not using any package managers.
EDIT
Solved the problem by using browserify, as mentioned below.
Thanks for the help
You need to use something like Rollup, Webpack, or Browserify. This statement import FormComponent from './FormComponent.js'; doesn't mean anything on the client. No browser natively supports it so you need something like the tools mentioned above to turn it into something the browser can actually use.
Without them you just have to load the files in your index.html.
Maybe if you try to include components like the first but declare like text/javascript should run.
I hope this solves your problem
I'm trying to get started with Google's Polymer Paper Elements 1.0 by displaying a simple message dialog:
<html>
<head>
<script src="scripts/polymer/webcomponentsjs/webcomponents.min.js"></script>
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
The words "Dialog test" appear on the page, but there's no dialog. Does anyone know what I'm missing?
You are missing a reference to the paper-dialog element definition.
<html>
<head>
<title>Example</title>
<script src="path/to/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="path/to/paper-dialog/paper-dialog.html" />
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
Including the proper import (<link rel="import" href="path/to/paper-dialog/paper-dialog.html" />) will allow the element to be recognized by the browser and provide the functionality you expect including behavior and style.
For an interactive tutorial on using web components you can check out the tutorial on component.kitchen.