I use Webpack to compile my JS which is then loaded via bundle.js via a template string sent via express.
The only problem is, I can't find information on how to render custom html while also using webpack-dev-middleware to watch and compile bundle.js.
My HTML is being sent with the following code:
app.use('*', (req, res) => {
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Title</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="main"></div>
<script type="text/javascript">window.__userData=${JSON.stringify(req.user)}</script>
<script src="/bundle.js" type="text/javascript"></script>
</body>
</html>`);
});
So, I have no idea how I can keep/use this while using webpack-dev-middleware for the bundle.js, since what I tried to do was just add app.use as per webpack-dev-middleware before the above snippet, though it did not work, failing with the error of bundle.js being of the wrong mime type text/html, thus not executable.
EDIT
The server-side rendering option for webpack-dev-middleware is experimental and not what I'm looking for, I don't need raw bundle.js to send with html.
Related
consider the next index.html file(which loading a script which allows running python code inside HTML 'py-script' tags):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite App</title>
<link rel="stylesheet" href="./pyscript-runtime/pyscript.css"/>
<script defer src="./pyscript-runtime/pyscript.js"></script>
<py-config>
- autoclose_loader: true
- runtimes:
- src: "./pyscript-runtime/pyodide.js"
name: pyodide-0.20
lang: python
</py-config>
</head>
<body>
<py-script>
print('hello world')
</py-script>
</body>
</html>
when serving this index.html file via a normal web server /pyscript-runtime/pyscript.js is being loaded as a script an the page loads correctly.
however, loading this HTML as an entry point from vite would result in injected import <> from <> at the top of the file, treating it as a module, resulting in the famous error Uncaught SyntaxError: Cannot use import statement outside a module:
I actually tried to load this script as a module from normal web server and it worked, while vite refuses to load this page correctly, and I'm having a hard time understanding why.
this is the source code, cloning and serving index.html would result in working page
https://github.com/Eliav2/pyscript-offline-example
loading the same index.html file as entry point from vite app would not work.
is there any reason why the same HTML file would be loaded differently from a web server and a development web server like vite?
I am using vue cli within wordpress. Wordpress has it's own way of adding scripts to the DOM. Because of this I do not need vue cli to add the script the final index.html file. When I run npm run build I get something like this:
<!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="/favicon.ico">
<title>my-app</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
I want when I run build to not have the tags and css injected. What's happening is when the html file is run I get a bunch of 404 errors. So it would be great if there is a way to stop the injection completely but still build the actual bundle files.
You can do that by disabling injection in the HTML Webpack Plugin options. Add the following to your vue.config.js file.
chainWebpack: (config) => {
config.plugin('html').tap((args) => {
args[0].inject = false
return args
})
}
I am working on a 3D viewer using express.
My problem is that I am trying to require the file system module in one (not the main one) of my JS files. When I try to load the browser, the console gives me the next message:
ReferenceError: require is not defined
My project structure is:
node_module
src
js
app.js // the problem is here
views
index.ejs
server.js
A short example of how to use importing with the browser:
Create index.html with next content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
Check script tag - we set type="module" - this instructs the browser that we are using module system
Create main.js script with:
import name from './name.js';
console.log(name);
Create name.js file:
const name = 'test';
export default name;
Now you need to run this app. The easiest way is to use WebServer For Chrome
Start the application and check the console. You should see that the 'test' is logged.
That's it. Please, keep in mind that this is just an example. We don't touch minification, caching and other important things.
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'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.