Browserstack not serving index.html by default - browser-sync

bs-config.json
{
"port": 8000,
"server": {
"baseDir": "./dist",
"serveStaticOptions": {
"extensions": [
"html",
"js"
]
}
},
"startPath": "/my-app"
}
When I load localhost:8000/my-app it says Cannot GET /my-app, yet loading localhost:8000/my-app/index.html works.
It also isn't picking up localhost:8000/my-app/index or Javascript files that index.html tries to load, unless I explicitly put the .js extension.

According to the options guide, maybe you can try this config:
{
"port": 8000,
"server": {
"baseDir": "./dist/my-app",
"index": "index.html",
"serveStaticOptions": {
"extensions": [
"html",
"js"
]
}
}
}

Related

How to ignore .eslintrc.json from NX generator template when linting

I have created a NX plugin/lib named nx.
The plugin's package.json defines the linting target:
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": [
"libs/nx/executors.json",
"libs/nx/package.json",
"libs/nx/src/executors",
"libs/nx/src/generators"
]
}
}
The .eslintrc.json is:
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*"]
}
The extended .eslintrc.json is:
{
"root": true,
"ignorePatterns": ["**/*"],
"plugins": ["#nrwl/nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"#nrwl/nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
"allow": [],
"depConstraints": [
{
"sourceTag": "*",
"onlyDependOnLibsWithTags": ["*"]
}
]
}
]
}
},
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:#nrwl/nx/typescript"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:#nrwl/nx/javascript"],
"rules": {}
},
{
"files": "*.json",
"parser": "jsonc-eslint-parser",
"rules": {}
}
]
}
The problem is that the generator dir contains templates for generating ts apps and each app has its own .eslintrc.json file. So when I run linting for some reason it parses these files resulting in an error:
Failed to load config "../../.eslintrc.base.json" to extend from.
Referenced from:
[...]/libs/nx/src/generators/application/template/.eslintrc.json
I tried to update the ignorePatterns of my config
{
"ignorePatterns": ["!**/*", "**/*.eslintrc.json"]
}
but without success. How can I solve this problem?

Eslint ProjectNotFoundError

I am getting following when running eslint in a Gatsby project
Oops! Something went wrong! :(
ESLint: 7.32.0
[ProjectNotFoundError: File '/home/path_to_project/somefile.ts' doesn't match any project] {
name: 'ProjectNotFoundError',
message: "File '/home/path_to_project/somefile.ts' doesn't match any project"
}
My .eslintrc
{
"extends": [
"react-app",
"plugin:jsx-a11y/recommended",
"prettier",
"plugin:tailwindcss/recommended"
// "airbnb"
],
"plugins": ["jsx-a11y"],
"rules": {
"no-restricted-imports": [
"error",
{
"patterns": ["#/features/*/*"]
}
],
"tailwindcss/classnames-order": "error",
"tailwindcss/no-custom-classname": "error"
},
"settings": {
"tailwindcss": {
"groupByResponsive": true
}
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"processor": "#graphql-eslint/graphql",
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"es6": true
}
},
{
"files": ["*.graphql"],
"parser": "#graphql-eslint/eslint-plugin",
"plugins": ["#graphql-eslint"],
"rules": {
"#graphql-eslint/no-anonymous-operations": "error",
"#graphql-eslint/naming-convention": [
"error",
{
"OperationDefinition": {
"style": "PascalCase",
"forbiddenPrefixes": ["Query", "Mutation", "Subscription", "Get"],
"forbiddenSuffixes": ["Query", "Mutation", "Subscription"]
}
}
]
}
}
]
}
.eslintignore
node_modules/
.cache/
public/
.idea/
yarn-error.log
.yarn/
Commenting out the following section in .eslintrc fix the issue, but I want to keep that section, things used to work fine with that section before. No clue what's wrong, since the error message provided by ESLint is pretty vague.
{
"files": ["*.ts", "*.tsx"],
"processor": "#graphql-eslint/graphql",
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended"
],
"env": {
"es6": true
}
},
Update
Problem seems to be due to following, since commenting it out fix the error.
"processor": "#graphql-eslint/graphql",
I was earlier using Gatsby's GraphQL Typegen disabled due to it buggy nature (rebuild loop and .cache errors) by commenting out graphql.config.js and removing graphqlTypegen: true, from gatsby-config.ts
According to graphql-eslint
If you are defining GraphQL schema or GraphQL operations in code files, you'll want to define an additional override to extend the functionality of this plugin to the schema and operations in those files.
{
"overrides": [
+ {
+ "files": ["*.js"],
+ "processor": "#graphql-eslint/graphql"
+ },
...
}
It seems, disabling GraphQL Typegen result in mentioned error in "processor": "#graphql-eslint/graphql" of eslint override.

How to add base/baseHref to Nx/Vite manifest.json file

How can I prefix the file, css, and assets in a Vite manifest.json file with a CDN URL?
export default defineConfig({
base: 'https://my-cdn.com/',
build: {
manifest: true,
rollupOptions: {
input: '/path/to/main.js'
}
}
})
but the end result is:
{
"main.js": {
"file": "assets/main.4889e940.js",
"src": "main.js",
"isEntry": true,
"dynamicImports": [],
"css": ["assets/main.b82dbe22.css"],
"assets": ["assets/asset.0ab0f9cd.png"]
}
}
instead of:
{
"main.js": {
"file": "https://my-cdn.com/assets/main.4889e940.js",
"src": "main.js",
"isEntry": true,
"dynamicImports": [],
"css": ["https://my-cdn.com/assets/main.b82dbe22.css"],
"assets": ["https://my-cdn.com/assets/asset.0ab0f9cd.png"]
}
}
To achieve that, you need to add a base property with the URL or path in the project.json file under targets/build/options.
Here is an example project.json config file:
{
"name": "app",
"$schema": "node_modules/nx/schemas/project-schema.json",
"sourceRoot": "./src",
"projectType": "application",
"targets": {
"build": {
"executor": "#nrwl/vite:build",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/app",
"base": "https://my-cdn.com"
}
}
}
}
And if you are using vite without NX, then you can provide a base argument to the vite build command.
An example:
vite build --base="https://my-cdn.com"

JSDoc configuration to exclude output files

I'm writing up some API documentation for a Node/Express app with JSDoc. I have a simple configuration file set up when running jsdoc ./routes -c config.json:
{
"source": {
"includePattern": ".+\\.js(doc)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"tags": {
"allowUnknownTags": true,
"dictionaries": ["jsdoc", "closure"]
},
"plugins": ["plugins/markdown"],
"templates": {
"cleverLinks": true,
"monospaceLinks": true
},
"opts": {
"destination": "docs",
"recurse": true,
"readme": "README.md"
}
}
The command outputs a folder /docs with fonts, scripts, styles, and index.html. Is there a way to configure JSDoc to exclude outputting all directories besides a simple HTML file?I was thinking something like:
"output": {
"exclude": ["fonts", "scripts", "styles"]
}

Typescript project with Unit tests, problems running tests with Chutzpah

I have a project in Visual Studio that is using typescript and requirejs, and that is running QUnit tests with the help of Chutzpah.
Folderstructure in my project looks basically like this:
- chutzpah.json
- app/
- index.html
- js/
- config.js
- main.ts
- Module.ts
- tests/
- Test1.ts
up until now, I had requirejs configured so that in all my imports, I had to use
app/js/Module, for example, to load that one.
Tests were also running just fine.
Now, I have changed my requirejs config to use baseUrl of js inside the app folder, so I can use just "Module" for the import. application itself is running fine, but I cannot get the tests to work.
With my current chutzpah.json, it seems that it wants to load the test files from ../tests/, so for the Test1 example, it would want to load ../tests/Test1.js
This is my config.js:
require.config({
baseUrl: 'js',
paths: {
'swfJQ': '../libs/js/swfJQ'
},
shim: {
'swfJQ': {
"exports": "swfJQ"
}
}
});
This is my chutzpah.json:
{
"Framework": "qunit",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"TypeScriptModuleKind": "AMD",
"Tests": [ { "Path": "tests", "Includes": [ "*Tests.ts" ] } ],
"AMDBaseUrl": "js",
"AMDAppDirectory": "app",
"References": [
{ "Path": "app/libs/js/jquery.js", "IsTestFrameworkFile": true },
{ "Path": "app/libs/require.js", "IsTestFrameworkFile": true },
{ "Path": "app/config.js" },
{ "Path": "require.d.ts", "IncludeInTestHarness": false },
{ "Path": "qunit.d.ts", "IncludeInTestHarness": false },
{ "Path": "tests", "IncludeInTestHarness": false, "Excludes": ["*.html"] },
{ "Path": "app/js", "IncludeInTestHarness": false }
],
"EnableCodeCoverage ": "true",
"CodeCoverageIncludes": [
"*app/js/*"
],
"CodeCoverageExcludes": [
"app/libs/*",
"tests/*"
]
}
This is one of the test files:
import Replay = require('../app/js/Module');
QUnit.module("Module tests");
test("Module.constructor", function (assert: QUnitAssert) { /* stuff */ }
I think the require('../app/js/Module') is more or less the culprit and will set the scope to ../, but if I write the code otherwise, the typescript compiler won't compile.
I guess this is probably something very easy I am missing, but I just can't pin it.
Maybe it is not a chutzpah problem I have, but my general Typescript setup should be different (so I don't have to use require('../app ... ') in my test files)?
Turned out this should have been quite easy:
I had to set the AMDBaseUrl in the Chutzpah config to "app/js", and removing the AMDAppDirectory property.
Can't believe I didn't try that before.
My chutzpah.json:
{
"Framework": "qunit",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"TypeScriptModuleKind": "AMD",
"Tests": [ { "Path": "tests", "Includes": [ "*Tests.ts" ] } ],
"AMDBasePath": "app/js",
"References": [
{ "Path": "app/libs/js/jquery.js", "IsTestFrameworkFile": true },
{ "Path": "app/libs/js/kendo.ui.core.min.js", "IsTestFrameworkFile": true },
{ "Path": "app/libs/js/mediaelement-and-player.js", "IsTestFrameworkFile": true },
{ "Path": "app/libs/require.js", "IsTestFrameworkFile": true },
{ "Path": "app/libs/js/SCORM_API_wrapper.js" },
{ "Path": "require.d.ts", "IncludeInTestHarness": false },
{ "Path": "qunit.d.ts", "IncludeInTestHarness": false },
{ "Path": "tests", "IncludeInTestHarness": false, "Excludes": ["*.html"] },
{ "Path": "app/js", "IncludeInTestHarness": false }
],
"EnableCodeCoverage ": "true",
"CodeCoverageIncludes": [
"*app/js/*"
],
"CodeCoverageExcludes": [
"app/libs/*",
"tests/*"
]
}

Resources