Develop Reference

Next.js - Eslint is not linting any pages in dev mode (aside from pages/_app.js)

I'm having problems setting up eslint with Next.js. It actually properly lints all my files when I run next build, but when I run the application in dev mode (next), eslint only actually lints pages/_app.js, and totally ignores all my other files (eg. pages/index.js).
My next.config.js looks like this:
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
if (dev) {
config.module.rules.push({
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
})
}
return config
},
}
and .eslintrc.js looks like this:
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": 0
}
};
Is there a sample project somewhere that demonstrates setting up eslint with Next.js? Eslint is pretty much the standard for any modern JS web application, so I'm surprised to find no mention of eslint in the docs or any of the demo projects.

Ok I figured out the problem, next.js in dev mode doesn't actually lint any pages until you try to load them in your browser. So if you have linting errors on pages/index.js, you won't actually see them until you load your homepage in the browser. https://github.com/zeit/next.js/issues/9904

I was actually able to achieve the lint on dev mode using the npm concurrenly package with eslint-watch.
Doing this, my commands looks like (in package.json) :
"scripts": {
"dev": "concurrently \"npm run lint-js:watch\" \"npm run lint-md:watch\" \"next dev\"",
"build": "next build",
"start": "next start",
"lint-md": "remark .",
"lint-md:watch": "remark --watch .",
"lint-js": "eslint -c ./.eslintrc --ignore-path ./.eslintignore ./src",
"lint-js:watch": "esw -w -c ./.eslintrc --ignore-path ./.eslintignore"
}
Hope that will help!

Angular(5) Firebase Deployment Issue

I am attempting to deploy an Angular5/Firebase application to Firebase. All steps during the Firebase-CLI deployment process seem fine. The main page works on the deployed site. (It is our Welcome Controller). However, none of the links work. When I try to navigate to a sub-page on the site, the browser shows this.
During the CLI deployment process. I answered this
"What do you want to use as your public directory?"
With
"dist"
Here is my firebase.json
{
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"storage": {
"rules": "storage.rules"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}
Here is the link
https://west-oaks-fe502.firebaseapp.com/

During the Firebase-CLI deployment process, this question
"Configure as single page app?"
Should be
"yes"

angular-cli.json create error while adding style.css

I am creating my first angular electron project and here is my error log I am trying to add new fonts and styles in my angular 4 project
I have removed bootstrap from my project because style.css contains all the boostrap code and my personal css
ERROR in multi ./node_modules/MicroFinanceAssets/css/style.css Module
not found: Error: Can't resolve
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css'
in
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/models/webpack-configs'
resolve
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css'
in
'/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/models/webpack-configs'
using description file:
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/package.json
(relative path: ./models/webpack-configs)
Field 'browser' doesn't contain a valid alias configuration after using description file:
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/#angular/cli/package.json
(relative path: ./models/webpack-configs)
using description file: /home/deck/Documents/project/MicroFinance/UI/angular-electron-master/package.json
(relative path: ./node_modules/MicroFinanceAssets/css/style.css)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css
doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.ts
doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.js
doesn't exist
as directory
/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css
doesn't exist
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css]
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.ts]
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css.js]
[/home/deck/Documents/project/MicroFinance/UI/angular-electron-master/node_modules/MicroFinanceAssets/css/style.css]
# multi ./node_modules/MicroFinanceAssets/css/style.css npm ERR! code
ELIFECYCLE npm ERR! errno 1 npm ERR! angular-electron#0.0.0 build: ng
build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the
angular-electron#0.0.0 build script. npm ERR! This is probably not a
problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
/home/deck/.npm/_logs/2018-05-16T07_04_57_890Z-debug.log
here is my angular-cli file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "angular-electron"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"styles": [
"../node_modules/MicroFinanceAssets/css/style.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
if you need any extra code details comment me I will provide you and thank you in advance for your time and consideration

MicroFinanceAssets <Directory>
- node_modules <Directory>
- angular-cli.json
you need to run command npm start from(under) directory MicroFinanceAssets
either for testing
run npm i font-awesome --save
and add following line in angular-cli instead your css file
"../node_modules/font-awesome/css/font-awesome.css"
If it gets compiled then your path to css file is wrong

this cli may be help you..
first install bootstrap in your program using
npm install bootstrap --save
and change your cli with this code
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "angular-electron"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"styles": [
"../node_modules/admin-ample/template/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/admin-ample/plugins/bower_components/jquery/dist/jquery.min.js",
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
this may help you?

Actually angular 4 has in-built functionality that it can pre-validate.In Angular older version like AJ 1.6 there are no pre-check inside it. So you have to make sure that your CSS has any syntax error and any extra character-word then remove it,and build it. hope fully it will be work

Configure base URL depending on environment

Suppose we have Angular 4+ app that needs to be located in different relative root URLs on different environments, i.e.:
http://localhost:4200/index.html for development
http://prod.server.com/angular-app/index.html for production
Most likely, we'd want to have that option in our environment.x.ts files:
export const environment = {
production: false,
appRoot: "/"
};
export const environment = {
production: true,
appRoot: "/angular-app/"
};
How can we configure Angular build/runtime infrastructure to automatically adjust the app depending on this option in environment.x.ts files?
UPDATE:
Since I'm using the Angular CLI toolchain indirectly via Visual Studio build/publish system (template), it'd be nice to have a solution based completely on Angular CLI + *.json/*.ts/*.js files. This way it would be suitable for any build system where Angular CLI could be used.

If you are using the Angular CLI you can do:
ng build --prod --base-href /myUrl/
OR
ng build --prod --bh /myUrl/

An alternative to the option described in #DeborahK answer could be to add build configurations to package.json and setup your IDE to specify the desired build configuration depending on environment it's building for.
Here is a snippet from package.json:
{
...
"scripts": {
...
"build": "ng build",
"build:Debug": "ng build --dev --base-href /",
"build:Release": "ng build --prod --base-href /angular-app/",
...
},
...
}
And here is a snippet of .csproj file to give you an idea of how it could be integrated with Visual Studio (credits to #Andrey_Fomin in this discussion):
<Target Name="NgBuildAndAddToPublishOutput" AfterTargets="ComputeFilesToPublish">
<Exec Command="npm run | findstr "build:$(Configuration)"" ConsoleToMSBuild="true" IgnoreExitCode="true" EchoOff="true" WorkingDirectory="$(MSBuildProjectDirectory)">
<Output TaskParameter="ConsoleOutput" PropertyName="NpmScriptName" />
</Exec>
<Exec Condition=" '$(NpmScriptName)'=='build:$(Configuration)' " Command="npm run $(NpmScriptName)" />
<Exec Condition=" '$(NpmScriptName)'!='build:$(Configuration)' " Command="npm run build" />
</Target>

UPDATED:
Carefully follow these steps and you are good to go :)
----------------------------------------------------------
1. Create 4 files in environment folder: (2 might there by default)
example:
environment.ts, environment.prod.ts,environment.test1.ts,environment.test2.ts
2. Use this common code for every file with slight change:
export const environment = {
production: true, //production is true for environment.prod.ts file
//for other test production is false
apiUrl: '' //base_url of each environment
};
3. Maintain a constant file where you will write all base urls.
code sample of constant.ts:
import { environment } from '../environments/environment';
let url = environment.apiUrl;
export const AppConstant = Object.freeze({
BASE_API_URL: url,
}
4. import this constant in your service or component class wherever your calling back-end.
5. In angular-cli.json:
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"test1": "environments/environment.test1.ts",
"test2": "environments/environment.test2.ts"
}
6.
ng build --env=prod
ng build --env=dev / ng build
ng build --env=test1
ng build --env=test2
7. if aot is creating problem. you can use : ng build --env=prod --no-aot
8. TO make things simple:
you can additonally add new build commands:
"scripts": {
"ng": "ng",
"start": "ng serve --env=local --no-aot",
"start:qa": "ng serve --env=dev --no-aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:prod": "ng build --prod --env=prod --no-aot --output-hashing=all",
"build:dev": "ng build --prod --env=dev --no-aot --output-hashing=all",
"build:local": "ng build --env=local"
}
When you run,command is ==> npm run start OR npm run start:qa
OR==> npm run build:local or npm run build:dev, etc.
9. Hashing will solve caching isuue.
Hope it solves your problem. It works for me.

In angular 6 we can do it in better way, by using environment.x.ts (x means it might be production/development/configuration etc files).
suppose if its dev mode file name(environment.dev.ts)
export const environment = {
production: false,
appRoot: "/" or appRoot: "http://somerestapi"
};
suppose if its in production mode file name(environment.prod.ts)
export const environment = {
production: true,
appRoot: "/" or appRoot: "http://somerestapi"
};
and same appRoot can be used in all services as in below
service.ts file.
import { environment } from '../../environments/environment';
appRoot = environment.appRoot;
emplLoginCheckUrl = this.appRoot + "/checkValidUser";
validateUserDetails(employeeDetails): Observable<any> {
console.log(this.appRoot );
return this._httpClinet.post(this.emplLoginCheckUrl, employeeDetails);
}
after this we have one more job to do, its open your angular.json file
apply below changes to "dev": mode
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
and apply below changes to "production": mode
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
but you have to choose which one is needed to run the application, like if you want to run in dev mode use below command it will automatically apply appRoot(URL) for all aservices where you called.
ng build --configuration=dev (for development mode).
ng build --configuration=production (for production mode).

Using node-modules in main.js using electron-builder and webpack

First of all I do not know if the problem I am having is because of webpack or electron-builder or a combination.
To the problem.
When I build for development I am able to use installed node-modules in the main.js file specified in my package.json file{"main" : "app/main.js"}.
However when I have used electron builder to create an installer. When I have installed the app using the installer I get the following error message when starting the app:
My guess is that I get this message because the the needed node-modules can not be found by main.js. So how do I make them available?
I hope there is someone smarter than me our just better at googling :)
Package.js:
{
"main": "app/main.js",
"scripts": {
"hot-server": "node hot-server.js",
"build-bundle": "rimraf app/dist.release && better-npm-run build-bundle",
"start": "better-npm-run start",
"start-hot": "better-npm-run start-hot",
"backend": "node backend-dummy.js",
"dist-win": "npm run build-bundle && rimraf dist && build --win --ia32",
"dist-mac": "npm run build-bundle && rimraf dist && build --mac"
},
"betterScripts": {
"start": {
"command": "electron ./",
"env": {
"NODE_ENV": "production"
}
},
"start-hot": {
"command": "electron ./",
"env": {
"HOT": 1,
"NODE_ENV": "development"
}
},
"build-bundle": {
"command": "webpack --config webpack.config.production.js --progress --profile --colors",
"env": {
"NODE_ENV": "production"
}
}
},
"bin": {
"electron": "./node_modules/.bin/electron"
},
"build": {
"appId": "app",
"files": [
"dist.release/*",
"dist.resources/*",
"main.js",
"thirdparty/*",
"app.html"
],
"extraFiles": [
"lang/*",
{
"from": "build/extra",
"to": "./",
"filter": "**/*"
}
],
"asar": true
}

So I found a solution to my problem. What I did was I looked at this project:
https://github.com/chentsulin/electron-react-boilerplate
Where they have a special webpack.config.electron.js file that bundles all the node_modules for the main.development.js file into a main.js file that contains everything we need. And then when the electron program starts it uses this main.js bundle to run. To make this happen you need to add a build script in your package.json file that executes webpack.config.electron.js.
I think it is easier to understand how to solve it by looking the linked project than for me to explain.