I have a working web worker script that fails due to webpackJsonp undefined. Ideally I would like to make the web worker script not rely on webpack and just be output to the build directory without changes. If not, another option would be to figure out how to get the web worker working through webpack.
My webpack config sets up the output like so:
entry: {
home: './src/index.js',
audioWorker: './src/user/core/components/audio/sources/worker/viewer-websocket-audio.worker.js'
},
output: {
path: './build',
publicPath: '/',
filename: 'app.dev.[name].[chunkhash].js'
},
Related
I would like to integrate Vue in my .net MVC project. I've installed Vue using the CLI and added the following vue.config.js:
module.exports = {
devServer: {
proxy: {
'/': {
target: 'http://mvcsite.local',
changeOrigin: true
}
},
disableHostCheck: true
},
runtimeCompiler: true
};
The proxy works fine, except that a request to the root http://localhost:8080 (which the dev server runs at) serves the index.html generated by Vue, rather than proxying the request to the root of http://mvcsite.local. How do I proxy that particular request?
As indicated in your comment, there is an open issue on github for this, so currently there seems to be no fix. In my case (ASP.NET MVC 4) I solved the problem using a workaround. I simply move the root dir to /Home in development environment. Of course your server backend has to support this scenario, but that's usually the smaller problem. My working vue.config.js for #vue/cli 3 looks like this:
module.exports = {
publicPath: "/Home",
devServer: {
publicPath: "/Home",
proxy:
{
'^/Home/*': {
target: 'http://localhost:50353/',
ws: true,
changeOrigin: true
}
},
}
I am working with an Aurelia app that should start at a different page than index.html, but I cannot find where to change that.
Where in an Aurelia app can you set which landing page to use?
This is misunderstanding. index.html page is the default landing page set by web server, not Aurelia. E.g. if you try to get the url e.g.https://stackoverflow.com the web server will give index.html by default. You need to change it in web server.
e.g. using Apache web server directive DirectoryIndex myindex.html
From https://httpd.apache.org/docs/2.4/mod/mod_dir.html:
The DirectoryIndex directive sets the list of resources to look for, when the client requests an index of the directory by specifying a / at the end of the directory name.
When using development server of Aurelia (default webpack-dev-server configured by aurelia-cli), the index.ejs compiles to index.html. You may need to change configuration of HtmlWebpackPlugin in webpack.config.js in order to change generated file from index.html to some other name:
new HtmlWebpackPlugin({
template: 'index.ejs',
filename: 'myindex.html',
...
If you're using the CLI, there is not an easy way to do this. The CLI is mostly for basic use cases, and if you're trying to do something fancy, you're going to have to learn a bit more about JavaScript tooling.
You can still do it and here's how:
Open aurelia_project/tasks/run.js and make sure the server property of the argument to the browserSync function has the index property pointing at the index file you want to use, like this:
let serve = gulp.series(
build,
done => {
browserSync({
online: false,
open: false,
port: 9000,
logLevel: 'silent',
server: {
index: 'my-special-index.html', // Make sure you have this line in there.
baseDir: [project.platform.baseDir],
middleware: [historyApiFallback(), function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}]
}
}
);
I'm setting up a basic vue app with vuetify/vue-router, and when loading the base url '/', everything works fine. I can click a to /manage/products without any problem.
However, when loading /manage/products directly by typing in the address bar, I get this error:
Failed to load resource: the server responded with a status of 404 (Not Found)
It seems to want to load /manage/dist/build.js instead of /dist/build.js.
Can I change my webpack.config.js to make sure the right build.js is called?
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'#' : path.resolve(__dirname, './src'),
'vue$': 'vue/dist/vue.esm.js',
'public': path.resolve(__dirname, './public')
}
}
vue-router 'hash' mode works, but I would like to use 'history' mode for cleaner URLs.
For reference: I've used this template
vue init vuetifyjs/webpack-simple
EDIT:
I've found the solution.
The vuetifyjs/webpack-simple template had a misconfiguration from the start.
Inside index.html I've changed:
<script src="./dist/build.js"></script>
to
<script src="/dist/build.js"></script>
And made sure that these options were present inside webpack.config.js:
devServer: {
historyApiFallback: true
},
vue-router 'hash' mode works, but I would like to use 'history' mode for cleaner URLs
The point of the History API is to allow you to map DOM-generated and server-generated pages onto each other.
This means that if JavaScript fails for any reason, then the server can deliver the page instead. This means that if someone deep links to a page on your site, then the server can just deliver that page (as opposed to delivering the homepage, and then using JavaScript to mutate it into the desired page).
You need to write server-side code that will deliver the page.
I am trying to get my fairly typical JavaScript (React) app to run in dev mode on AWS Cloud9. I successfully cloned my repo (using https ugh), installed my npm packages, and can run scripts in the console. However, I don't know how to run and access the app in dev mode. There are a plethora of docs but they all seem to dance around the running part. My guess is I need to somehow set a custom host and port, but I also need to find what URL to use to see the app running.
Here is my devServer config:
devServer: {
// Display only errors to reduce the amount of output.
stats: "errors-only",
host, // Defaults to `localhost`
port, // Defaults to 8080
overlay: {
errors: true,
warnings: true,
},
}
If anyone comes across this, I wanted to share my solution because I know how frustrating this can be:
First, create a script in your package.json file:
"start": "webpack-dev-server --open"
Then, add the following to your Webpack config file:
devServer: {
contentBase: path.join(__dirname, 'dist'),
host: '0.0.0.0',
port: 8080,
compress: true,
}
Then, open the terminal in AWS Cloud 9, and run the script:
npm start
Finally, click on the link in the terminal: "Project is running at http://0.0.0.0:8080/" and your app will show in a new window.
**If it doesn't work, don't forget to allow port 80 on your Cloud 9 Security Group: https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/working-with-security-groups.html#adding-security-group-rule
If you want to view the project in the preview pane, you can add the following to your devServer config:
disableHostCheck: true,
However, it's important to note that when set to true, this option bypasses host checking. THIS IS NOT RECOMMENDED as apps that do not check the host are vulnerable to DNS rebinding attacks.
1) First thing you need to do is to run react app on port 8080. You can do this by setting environment variable PORT to 8080 and then just starting react dev server from AWS Cloud9 terminal.
export PORT=8080
npm start
For details look at this discussion on GitHub.
2) After starting your application you can preview it by clicking Preview -> Preview Running Application at the top of AWS Cloud9.
For more details check this AWS Cloud9 doc
In webpack.config.js:
devServer: {
historyApiFallback: true,
contentBase: './',
host: process.env.IP,
//https: true,
port: process.env.PORT,
"public": "your-project.c9users.io" //no trailing slash
},
Refer Link
I am trying to set up my grunt server to allow push states.
After countless google searches and reading SO posts I cannot figure out how to do this.
I keep getting errors like the one below.
Does anyone have any ideas how to fix this?
No "connect" targets found. Warning: Task "connect" failed. Use --force to continue.
It appears to me below that I have defined targets with the line
open: {
target: 'http://localhost:8000'
}
See complete code below:
var pushState = require('grunt-connect-pushstate/lib/utils').pushState;
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
hostname: 'localhost',
port: 8000,
keepalive: true,
open: {
target: 'http://localhost:8000'
},
middleware: function (connect, options) {
return [
// Rewrite requests to root so they may be handled by router
pushState(),
// Serve static files
connect.static(options.base)
];
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); // Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-connect'); // Load the plugin that provides the "connect" task.
// Default task(s).
grunt.registerTask('default', [ 'connect']);
};
Push states are already included in most SPA frameworks, so you might not need this unless you're building a framework.
Angular: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
React: How to remove the hash from the url in react-router
This looks like a grunt build script to compile an application to serve. So I'm not exactly sure how you'd use pushStates in the build process. You may be trying to solve the wrong problem.
Don't bother with grunt to deploy a local dev pushstate server for your SPA.
In your project directory, install https://www.npmjs.com/package/pushstate-server
npm i pushstate-server -D
Then to launch it, add a script entry in the package.json of your project:
…
"scripts": {
"dev": "pushstate-server"
}
…
This way you can now start it running npm run dev
All the requests which would normally end in a 404 will now redirect to index.html.