I am trying to set up Karma to run a suite of Jasmine tests as part of a Maven build. I have set up Maven to run Karma via Node, but am struggling to get the files I need to be able to run my application served correctly by Karma. My application is an ExtJS 4 application, which brings its own issues of course, but I think there is something not working as expected in the Karma config itself.
I have tried to set up my Karma config to include only certain files, and serve the rest, so that it doesn't automatically execute everything, but the application has access to the files it needs. The [Karma files documentation] suggests that the included parameter will include the file in the page within a <script> tag, where the served parameter will serve the files. What I actually see is that if I include files (included: true), they will be served, but if I only wish to serve them (included: false, served: true) they are not served.
For example:
{ pattern: 'app/**/*.js', included: false, served: true, watched: false },
{ pattern: 'app-test/specs/**/*.js', watched: true, included: true},
results in the .js specs in subdirectories of the app-test/specs/ directory are run, but the source files in app/ are not even served. I have confirmed this by opening the developer tools in Chrome and looking at the sources to see which files have been served by Karma.
I expect my source files to be served and available to my application, without necessarily being included. This is important for sources that are overridden by test config, as they must not be executed before any test overrides are in place.
Related
I'm looking to switch from Webpack to Snowpack for a development environment. But I have multiple entry points set up in Webpack and I haven't been able to find an example of how to do this in Snowpack. It seems that Snowpack is meant to be used with a true SPA that has only one HTML page and one entry point Javascript file.
Each HTML page on the site (20 altogether) has its own index.js that is the starting point for that page and is independent from the other pages on the site. How would this work in Snowpack?
I found some discussions on Github about multiple entry points, but reading through the comments I wasn't able to determine if this is supported or not. If it isn't supported, would I need to run Snowpack for each index.js? Or is there another fast development tool that would work in this use case?
If you check the config documentation, you will see the mount option is an object, meaning you mount multiple directories. If you have multiple top level modules in a mounted directory, you will get multiple entry points.
For example, following configuration takes any module from src folder and outputs it to dist folder in your build directory:
mount: {
src: { url: '/dist' },
},
Say you have src/index.tsx and src/module.tsx files, you will get dist/index.js and dist/module.js files in your output directory.
I just tested and it works.
The Nuxt documentation (latest) states that for SPA you need to set ssr: false in nuxt.config.js. Also, every vue file in the pages folder is added to the router configuration, so you don't have to do this yourself. This is both correct and works perfectly, but there is something I really don't understand.
When I run npm run build (nuxt-ts build), it builds the production output of the project and puts in the dist folder (default). I was surprised to see that even though I configured it to be a SPA, it still generates HTML files for each vue file in the pages folder.
It happens with newly generated projects using npx nuxt-create-app as well.
What I'd expect is that it only generates one HTML file (which is index) when ssr is set to false and when I want a static app, I would use npm run generate or set target to 'static' to create HTML files per route.
Nuxt documentation also states this for the target property:
https://nuxtjs.org/docs/2.x/get-started/commands#target-server-default-value (builds output to dist)
https://nuxtjs.org/docs/2.x/get-started/commands#target-static (generates HTML per route)
All I have in my config is ssr set to false, so it should not generate static files (HTML) per page.
What am I missing here, or am I misunderstanding how this works?
Thanks in advance!
Remember that in a static setup, your visitors may arrive at your site via any of your page routes— not just index.html.
For example, they may access https://www.your-app.com/contact-us. If you do not have a contact-us.html file available, and you don’t have a server configured to handle this request (as is the case with universal mode), you’re gonna end up with a 404.
What happens in static mode is contact-us.html is served, which contains the minimum javascript necessary to hydrate your nuxt app, then SPA mode kicks in— giving you client-side navigation.
I'm using the Vue CLI to build my application into one of my existing php projects. In case to work with generated files in php, I need to move the assets to the ../public/assets/ directory. Unfortunately, this does not seem to work in development environment (production mode works just fine, but I'd really need to test the integration of vue in the php app).
Am I doing something wrong or is it a known restriction?
Here's the config:
// vue.config.js
module.exports = {
outputDir: '../public',
assetsDir: './assets',
indexPath: './views/index.html'
};
As per the documentation, you can just copy the assets into your public/assets folder and reference them via absolute path.
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Static assets can be handled in two different ways:
Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
Because of HMR in development mode this is not yet possible to implement. Here's the reference to the communication on Vue.js' forum.
I have developed a vue application and did run npm run build
After that I uploaded the content in the dist file to my webpage but it returned a blank page.
Since I did this for testing I uploaded it to a folder in my public_html/mypage.com/vueapplication To get all the paths right I added a vue.config.js with this content:
// vue.config.js
module.exports = {
publicPath: '/vueapplication/'
}
The application now works but I wounder however:
how do I best publish/upload the application to my site? Just by simply dragging the content inte the right folder?
how can I best maintain my site? Do I need to build again and upload, overwriting my files when everytime I make an update on my site?
And what is the difference between build and deploy your application?
Drag and dropping your code should work. But as your app grows you may want to look into automating this. For instance if you use an S3 bucket you can use the aws cli to automate the upload.
Yes, you should overwrite your deploy folder(s). You need to also take care of deploying different binary files, that have the same name. An example is if you have a global css file (main.css for instance). The file will probably change content between deployments, but keep the same name. Browsers may cache the file so users that downloaded older versions of the file will not use the new one. There are different techniques to handle this, but if you use webpack, it uses cache busting techniques and you should be fine.
Build is the process of transforming source code into an artifact(s). Exactly what this means differs from language to language, platform to platform. In the vuejs world this usually means a couple of js files, a couple of css files and some assets.
Deploying means taking the output of a build and making it available to your users. Again this differs from project to project. In the vuejs world this usually means taking the artifacts from the build and uploading them to an http enabled web server.
I am using Grunt and it is watching files in my src folder. However the baseDir is set to src so it is serving files from that point, however it can't see back to the node_modules folder.
How can I set grunt to serve from the correct folder but load the necessary packages that I need to load from the node_modules folder?
Sounds like what you mean is that you're using grunt to start a local web server? If so, then there isn't a good answer for you as a web server will only have access to files in its base directory. That said, if you need to access a file in node_modules/ from a web request you could add a copy task to move those files into a subdirectory within your baseDir.
Here's an example of using jQuery via node_modules - in your Gruntfile.js:
copy: {
vendorJS: {
files: [{
expand: true,
cwd: 'node_modules/jquery/dist/',
src: ['jquery.js'],
dest: 'src/vendor/'
}]
}
}
Then you would need to change how you pull in that file in the browser to match the src/vendor/ directory.