I'm using meteor and I ran npm install request to get access to that library. Everything seems to install correctly but when I run the meteor server, I then get the following error. Is there any word on why this is or how to solve it? Thanks.
While building the application:
node_modules/request/node_modules/node-uuid/test/test.html:1: bad formatting in HTML template
node_modules/request/node_modules/form-data/node_modules/combined-stream/node_modules/delayed-stream/test/run.js:1:15: Unexpected token ILLEGAL
node_modules/request/node_modules/form-data/node_modules/combined-stream/test/run.js:1:15: Unexpected token ILLEGAL
For reference:
test.html
<html>
<head>
<style>
div {
font-family: monospace;
font-size: 8pt;
}
div.log {color: #444;}
div.warn {color: #550;}
div.error {color: #800; font-weight: bold;}
</style>
<script src="../uuid.js"></script>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>
run.js (same)
#!/usr/bin/env node
var far = require('far').create();
far.add(__dirname);
far.include(/test-.*\.js$/);
far.execute();
Meteor constructs the entire DOM itself so it will typically reject any script tags included in the html (but it will include scripts in the head, thanks Andrew). It also only supports handlebars style templating (right now).
<html>
<head>
<title>Something</title>
</head>
<body>
{{>yourHandlebarsTemplate}}
</body>
</html>
My advice would be to have your js and css located as files inside the client folder under your projects root.
As for NPM request, you will not be able to:
install it normally like you do in most node projects, so node_module is out/npm install require is out
access the functions in it without a Npm.require
At this point you have two options: adding the package NPM from Atmosphere(unofficial package repository) and including request. Or try placing the lib into /packages/ and then using Npm.require('request').
Alternatively you can just use Meteor's built in HTTP package (meteor add http) which functions similar to request.
Remove from your template as it seems Meteor wants to create this tag for you when building the template. This should take care of the "bad formatting in HTML template" error in test.html.
Related
This is a PERN app. I don't remember ever getting this error and I haven't found any records when doing a Google search.
I don't see anything wrong in the index.html:
<!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>
</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>
Any idea where it comes from? I get it as soon as I start the app.
I'm just a beginner but it happens when you are passing the wrong URL to the fetch function, suppose that your db.json file is running on port 8000 and you are passing port 3000, that's why.
useFetch("http://localhost:3000/blogs/" + id);
Instead, try this, it might helps. :)
useFetch("http://localhost:8000/blogs/" + id);
Hope it helps.
So I had this same error when I installed npm gh-pages. My solution was to delete the Homepage link in package.json and it worked.
I had the same problem .
If you are using node server, install this npm install body-parser
and add these lines in your server-side code
const bodyParser = require("body-parser"); router.use(bodyParser.json());
I'm new at this, but I found if I added a proxy to my package.json (client side, not server side) it worked! It looks like this in package.json (placed above my dependencies): "proxy": "http://localhost:3001", . I believe it's because the client side can't read it, and the proxy tells it to pass it to the server side which can read it.
I got the same error while deploying the React app on Vercel. Turns out, I forgot to add environment variables to the project settings on Vercel.
Check if you are calling your api prefixing the protocol, like this 'https://apiurl...', not like this 'api.something'
Faced the same issue and it was my json path was incorrect. Initially it was fetch('./movies.json') which was incorrect path.
Fix it and now working fine:
useEffect(() => {
fetch('../movies.json')
.then(res => res.json())
.then(data => setMovies(data.posts))
}, [])
I was trying to fetch data from the backend into my react application, with out mentioning the proper path of the url in the loader function of the react-router library, hence this issue occured and once I defined the correct path, it worked just fine.
const response = await fetch("http://localhost:8080/events");
I forgot to mention "events" in the url.
Up to this point in my studies, I have been able to serve files to my dynamic web pages using Node.js and Express as follows.
app.use(express.static('./public'));
and then linking to files in the public folder.
The Wavesurfer.js documentation stated that a file has to be loaded from a url
Load an audio file from a URL:
wavesurfer.load('example/media/demo.wav');
I'm not to sure I understand what this mean. or how to link a file to wavesurfer.js using node.js
Edit:
I found this from the link Cross origin requests are only supported for HTTP.” error when loading a local file
Node.js
Alternatively, if you demand a more responsive setup and already use nodejs...
Install http-server by typing npm install -g http-server
Change into your working directory, where your some.html lives
Start your http server by issuing http-server -c-1
This spins up a Node.js httpd which serves the files in your directory as static files accessible from http://localhost:8080
Can't I achieve the same using express?
My code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="waveform"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.load('/public/recordings/o.mp3');
</script>
</body>
</html>
The errors I'm getting:
The AudioContext was not allowed to start. It must be resumed (or
created) after a user gesture on the page.
Access to XMLHttpRequest at 'file:///C:/public/recordings/o.mp3' from
origin 'null' has been blocked by CORS policy: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, https.
Ok so I think your problem is because you open the .html page in your browser locally (as a file://). Instead, try to load it from your Express server, something like http://localhost:port/some file.html
Looking at the documentation for installing Swagger-UI one can see that two official npm modules are being published: swagger-ui and swagger-ui-dist. However, I really struggle to figure out how these are supposed to be used with an already existing OpenApi 3.0 specification.
The only thing I need is a simple web application (plain node.js or express.js or whatever works) which will serve my existing specification.yml document embedded into the plain Swagger-UI files on a path like /docs.
Since this needs to be done in a repeatable manner (will run in a Docker container in the end), manual editing of files is not desired in the process.
The closest I could get was downloading a release tar ball, extracting the dist folder, use tools like sed to replace the default specification file with my own one and finally host this on a webserver like nginx.
However, this looks unnecessary complex to me and makes me wonder what the npm modules are supposed to be used for.
Finally I found two approaches to achieve my goal as outlined in the question.
Using unpkg
unpkg is an automated content delivery network for all modules that are published on the npm registry. It allows to include and use any npm module in a static HTML file without any complex package managers, dependency resolvers etc. This is especially great if you don't have any other need to use the npm ecosystem directly.
For swagger-ui, such an HTML file would look like this. Note that we are importing the swagger-ui-dist package which already includes all necessary dependencies.
<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist#3/swagger-ui.css" >
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"> </script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUIBundle({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</body>
</html>
Host this HTML file on your webserver and your all settled.
Using browserify / webpack
browserify and webpack are module bundlers from the npm ecosystem that can collect an npm module and all its dependencies, then bundle them up in one single js file. This file can then be loaded and used in an HTML page.
While both tools might differ feature-wise in the details, for this job both of them work almost in the same way. The following example uses browserify, however, the general approach with webpack is the same.
First, install browserify globally:
npm install -g browserify
Then, install the swagger-ui module locally in your current folder:
npm install --save swagger-ui
Finally, bundle the swagger-ui module and all of its dependencies into a single output file:
browserify --require swagger-ui -o bundle.js
The according HTML page to include it could look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
<title>Swagger-UI</title>
</head>
<body>
<div id="swagger-ui"></div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUI({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</html>
This approach might be preferred if you are using browserify or webpack within your ecosystem for other tasks anyway.
If you are looking for whatever works the easiest solution will be to use an existing swagger-ui like the demo store and pass your spec in the url param:
http://petstore.swagger.io/?url=https://raw.githack.com/heldersepu/hs-scripts/master/swagger/4411/7.json
If you want more of a standalone solution copy the swagger-ui dist directory to your deployment:
https://github.com/swagger-api/swagger-ui/tree/master/dist
then tweak the index.html to suit your needs
I am writing a WebRTC application and have the following problem:
I want to use the adapter.js library.
I have the following index.html:
<html>
<header>
<script src='../out/adapter.js'></script>
<script src='../out/main.js'></script>
</header>
<body>
<video id="localVideo" width='500' autoplay></video>
</body>
</html>
and my main.js looks like:
var adapter=require('webrtc-adapter');
var localVideo=document.querySelector('video#localVideo');
navigator.getUserMedia(media_constraints, handleUserMedia, handleUserMediaError);
function handleUserMedia(stream) {
localStream = stream;
adapter.attachMediaStream(localVideo, stream);
console.log('Adding local stream.');
}
but my browser logs the error: Uncaught ReferenceError: require is not defined
require is used (and defined) in Node.js environments to load modules. (Not exclusively, for more information check here).
If you downloaded an adapter.js version from here and include it the way you do (via script tags), you can simple delete the require(...) line and you should be good to go.
Edit: added an example
console.log(adapter.browserDetails.browser);
<script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
if you have checked installing adapter js?
check
npm webrtc-adapter --version
if not showing up in node, install it to your app
npm install --save webrtc-adapter
I am taking baby steps into the MEAN stack but can't figure out step 1, how to run my app. What do I use for a development web server and how do I start it in my directory?
If I just launch index.html as a file it will not work.
Here is my code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>My Site</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"> </script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.2.1/css/bootstrap-combined.min.css"
rel="stylesheet">
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
<a class="btn" ng-click="visible = true">Show the Form</a>
<div ng-show="visible">I used to be hidden!</div>
</body>
</html>
app.js
var app = angular.module( 'myApp', [] );
app.controller( 'MainCtrl', function( $scope ) {
$scope.visible = false;
});
If you simply want to explore AngularJS functionality(or any other front end library for that matter), you don't need a Node.js app.
Assuming you already have npm installed just follow these simple steps:
npm install http-server -g
go from your console to the folder containing your html files
enter http-server -c-1 -p 9000
That would start a simple web server on port 9000 with no caching on your specified directory.
Then simply go to http://0.0.0.0:9000/your_page.html from a browser and voila.
If you want to explore more options on http-server
This code can run without a http server, just in the browser. Note that you are using a really outdated version of Angular (1.0.3), they just released version 1.3.0.
If you want to run your stuff on a local development server, you could use something like yeoman, which generates the app boilerplate for you and comes with a local node server and a build job (check for example https://github.com/yeoman/generator-webapp or https://github.com/yeoman/generator-gulp-webapp)
If you just want a super easy hhtp server and have python installed you can also use python -m SimpleHTTPServer to start up an http server in the current folder.
Here is your code in plunker and it works: http://plnkr.co/edit/j2SqmrP1yWqR68Gm3UCn?p=preview
As you are using the MEAN stack, you should probably check node.js to implement your web server. Check http://www.nodebeginner.org/, it should allow you to code a very simple one.