I've installed searchkit (https://github.com/searchkit/searchkit) and have been trying to just get a basic webpage to show something. I have very little experience with Javascript and web development in general and would appreciate some help and guidance.
I installed SearchKit via bower and then simply copied out the bundle.js and theme.css into my project, just to see it work.
I have the following directory structure:
appHome/
index.html
js/
searchkitbundle.js
bundle.js
css/
theme.css
I copied bundle.js and theme.css from the release directory of the bower installation. I copied searchkitbundle.js from the from the live editor on SearchKit's docs website (http://docs.searchkit.co/stable/docs/setup/project-setup.html).
Here is my index.html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/searchkit/0.10.0/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/searchkit/0.10.0/theme.css">
<title>JSP Page</title>
</head>
<body>
<script type="text/javascript" src="js/bundle.js"></script>
<div id="app">
<div class="search">
<div class="search__query">
<SearchBox/>
</div>
</div>
</div>
</body>
I have tried changing this in a variety of ways but can't get it to work. It worked once, but I can't seem to get it to do so again.
I don't see any errors, either in the browser or in my IDE. I'm deploying this locally as well as another copy of it within a Tomcat JSP application.
Can anyone see what I'm doing wrong here and get it to work?
Related
I am getting this error
TypeError: Cannot read properties of undefined (reading 'UDFCompatibleDatafeed')
Import these two script in index.html /public folder
<script src="%PUBLIC_URL%/datafeeds/udf/dist/polyfills.js"></script>
<script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js"></script>
i deleted my project and cloned their project and then i followed those mention steps then its run
i figured out the problem later
so in our on project i we missed two script in index.html then it will give this error on running so clone the project and then follow the mention step for your specific framework or library
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="%PUBLIC_URL%/datafeeds/udf/dist/polyfills.js"></script>
<script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js"></script>
<title>Charting Library React Demo</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`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
I purchased a template which includes HTML, CSS, and Javascript files for a static webpage. I'm trying to use these existing files in my Angular project so I can connect it with a Nodejs app to make it a full stack webpage with backend. However, when I tried to put these files into Angular, everything is broken and is not functioning as it would when I manually open the HTML files on Chrome.
I've tried creating components for each HTML pages and adding the CSS and Javascript files into assets folder. Then I went on angular.json and added each CSS files into the styles array and the Javascript files into scripts array.
The HTML files look something like this:
<!doctype html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<title>Hireo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../assets/css/style.css">
<link rel="stylesheet" href="../../../assets/css/colors/blue.css">
</head>
<body>
.........body code...........
<!-- Scripts
================================================== -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<script src="js/mmenu.min.js"></script>
<script src="js/tippy.all.min.js"></script>
<script src="js/simplebar.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/snackbar.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/counterup.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Anything you put in your assets folder will be available to the application, just remember to provide the relative/absolute path including assets.
If you have files in other folders or have specific errors (e.g. in the Network tab in Dev Tools), please provide more details that so I can advise. Until then, you can find most common solutions in https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/.
In your angular.json file add the static .html files to the assets array with their respective paths. You can then access the files i.e www.your-domain.com/your-static-file.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="login.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="navbar" class="navbar">
</div>
</body>
<script src="/response.js" type="text/jsx"></script>
</html>
I am trying to create a component using ReactJS to set elements in the navigation bar. The problem is that the script I've written does not link to the html file. The value returned to the html tag is a list including nav, ul, and li tags.
How can I solve the problem of linking the script?
Thank you for the help.
Some browsers (e.g. Chrome) will fail to load the file unless it’s served via HTTP, which means that you’ll now need a server to view your page. A good one is http-server which can be installed from npm with the following command:
npm install -g http-server
And started frpm your project’s root directory like so:
http-server
Your page will now be viewable at http://127.0.0.1:8080/
I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.
I have my project in Sencha Architect 2.2.2 Build: 991.
I'm trying to create one file that contains only the extjs classes and my project code, because the idea is to load only one js file, not app-all.js and ext-all.js files in the page.
index.html:
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Site</title>
<link rel="stylesheet" href="res/ext/resources/ext-theme-classic/ext-theme-classic-all.css">
<link rel="stylesheet" href="res/list.css">
<script type="text/javascript" src="res/ext/ext-dev.js"></script>
<script type="text/javascript" src="res/ext/locale/ext-lang-pt.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
</html>
And I use:
sencha create jsb sudo -a http://.../index.html -p app.jsb3 --verbose
sencha build -p app.jsb3 -d . -v
And it creates two files classes app-all.js and all-classes.js.
app-all.js in theory have all the code minified (including extjs classes because I'm using ext-dev.js into the include.
<script type="text/javascript" src="res/ext/ext-dev.js"></script>
But if I include only app-all.js class in my html it says that it dont know what is Ext, that's undefined. If I add ext-all.js it works, but thats not the idea...
Thanks