Using ESLint on server files with CRA - create-react-app

In VS Code - When running CRA and setting up a simple file structure with backend and frontend directories, the frontend (React) files are linted automatically by ESLint, but there is no syntax highlighting in the backend server files.
We have tried multiple .eslintrc.js files in various places in the project (in the root etc) but the syntax highlighting (errors, warnings) for the files in backend doesn't occur.
In a non-react project this is working fine in VS Code with a .eslintrc.js file in the root.
IS CRA config overriding any other?
We have tried eg:
Adding the following snippet to settings.json in VS code
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
But this doesn't make any difference.

Related

Override testMatch for jest tests in create-react-app

Created an app with cra, wrote some unit tests with jest and everything works great.
I then tried to create a __tests__ folder at the root of the project and created the e2e.test.js file there.
But when you run "npm run test", only the files in the /src folder are checked.
How to make jest look for test files not only in "/src"?
I have tried many different variations of the testMatch style:
"testmatch": [ "**/__tests__/**/*.js", "**/?(*.)+(spec|test).js" ]
I wrote "testMatch" in both package.json and jest.config.js but none of that helped.
It feels like there's a setting somewhere inside jest that makes it ignore everything except the "/src" folder.
I also tried something like this and it didn't work.
https://stackoverflow.com/a/74601854/17811574
How do I get to see the tests folder at the root of the project?

Vue webpack environment variables configuration

I am new to vue in general and i am trying to configure some environment variables for some projects of mine so i can do some tests with cookies but apperently i ran the simple webpack configurations when creating these projects, therefore i dont have access to the config directory to edit said variables.
I created a vue.config.js file and used the following lines:
module.exports = {
publicPath: 'myAppName'
}
However if i run it on development mode, or simply use npm run serve my app runs at "http://localhost:8080/myAppName" instead of simply "myAppName".
How do i correctly configure my environment variables for my projects without having to start over from scratch? I am using vueCli 3 btw.
I tried following these examples but none have worked:
Using Environment Variables with Vue.js
I also have .env file and a .env.development file but i am not sure what to add to it.

Specify the assets output directory when building in development mode

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.

How to deliver an aurelia library for consumption by aurelia CLI based app

I'm building a library of aurelia custom elements for use by several different aurelia apps and am running into trouble getting the custom element html hooked into the app bundle properly with the CLI process.
I'm currently thinking that the library will be part of package.json and thus listed under node_modules/my-lib. What should the delivered .html format be
<template>...</template>
or should it be delivered in required format
define('text!my-lib/component1.html', ['module'], function(module) { module.exports = "<template>\r\n ...
If the former - what do I put in aurelia.json to get it to be included correctly in the vendor-bundle?
If I do resouces['../node_modules/my-lib/**/*.html'] in my-lib dependency section - it gets included as html in a js file which throws an error.
If I add as source to the vendor-bundle or using my own bundle my-lib-bundle.js
"source": [
"[../node_modules/my-lib/**/*.js]",
"../node_modules/my-lib/**/*.{css,html}"
],
Nothing gets included then except the 'main' listed in the one dependency.
If I add to the markupProcess (which seems more linked to the app and not a library)
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": [
"src\\**\\*.html",
"..\\node_modules\\my-lib\\**\\*.html"
]
},
I get the html correctly added to app-bundle but has the wrong path because it includes the '../node_modules' in the define so it's not found when the app attempt to use it.
I'm not using the CLI to build my lib as I want the app to only include pieces it uses. So the JS is built and delivered in AMD format, but I wasn't sure the process to go through with HTML?
Suggestions?
There is a skeleton plugin repo # github
https://github.com/aurelia/skeleton-plugin
With build scripts and all

generator-kraken static module out of date?

Just getting started with KrakenJS. After running the generator and looking at the config.json I notice it has the "static" middleware defined as:
"static": {
"module": {
"arguments": [ "path:./.build" ]
}
}
I have two issues/questions:
After running grunt build I see the browserify output in the /.build folder, but when I navigate to /js/app.js it appears to load the file from the /public folder. Shouldn't it be from the /.build folder?
With Express 4+ shouldn't this actually be serve-static?
I can't help but think I'm missing something.
Thanks!
As I guessed, I was missing something.
I dug into the kraken source a bit more and found that the core config defines the "name" property on static as "serve-static", so it is in fact correct when it merges with the config.json in my app.
The other issue I was having with loading from the incorrect folder was because inside the development.json config file the 'kraken-devtools' middleware is configured with the copier compiler, so when the file is requested at runtime it copies it from the /public folder into the /.build folder, overwriting the output from grunt build.