Deployment error firebase hosting - 0 files found - vue.js

Description:
During the deploy of firebase hosting, I received an error stating that 0 files were found. I have included my firebase.json file for reference.
Steps to reproduce:
Run the command firebase deploy --only hosting
Observe the error message stating that 0 files were found
Expected result:
The firebase hosting should be successfully deployed with the specified files.
Actual result:
An error is thrown stating that 0 files were found.
+ hosting: Finished running predeploy script.
i hosting[hosting-project]: beginning deploy...
i hosting[hosting-project]: found 0 files in hosting
+ hosting[hosting-project]: file upload complete
i hosting[hosting-project]: finalizing version...
+ hosting[hosting-project]: version finalized
i hosting[hosting-project]: releasing new version...
+ hosting[hosting-project]: release complete
+ Deploy complete!
Notes:
I have double-checked the file path in the firebase.json file and it
appears to be correct.
I have tried rerunning the deploy command multiple times with the same result
I have also tried deploying a
different project with the same firebase.json file, but the issue
persists.
In my firebase.json file, I am not targeting the dist folder directly because I am using the predeploy script to run npm run lint and npm run build before the deployment. However, I am not ignoring the dist folder with !dist% and !dist/*, which means I am not excluding it from the deployment.
Attached files:
firebase.json
{
"firestore": {
"port": "8080"
},
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
}
],
"hosting":{
"public":"hosting",
"ignore": [
"*",
"!dist/",
"!dist/*",
],
"rewrites":[
{
"source":"**",
"destination":"dist/index.html"
}
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
}

I found a solution to resolve the issue of "0 files found" during the deploy of firebase hosting. It may not be the most elegant solution, but it does work. In the "predeploy" section of the hosting configuration, I added ".." at the end of the "npm run lint" and "npm run build" commands to go back to the root folder:
"npm --prefix \"$RESOURCE_DIR\\..\" run lint",
"npm --prefix \"$RESOURCE_DIR\\..\" run build"
This allowed me to target the dist folder directly in the hosting configuration, as specified in the official documentation. Here is the modified hosting configuration:
"hosting":{
"public":"hosting/dist",
"ignore": [
"**/.*",
"**/node_modules/**"
],
"rewrites":[
{
"source":"**",
"destination":"/index.html"
}
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\\..\" run lint",
"npm --prefix \"$RESOURCE_DIR\\..\" run build"
]
}
I hope this helps anyone else who may be experiencing the same issue.

Related

Failed to load plugin 'react' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-react'

When run locally, it seems to work fine but crashes when its on pipeline
EDIT: After removing npx, it produces a different error:
I have followed the advice of installing the plugin:
npm install eslint-plugin-react#latest --save-dev
But seeps to repeat itself.
Here's my retracted bitbucket-pipelines.yml config:
- step:
name: CI
caches:
- node
script:
- npm install
- npm run lint
- npm run test
eqautes to package.json
"lint": "eslint --ext .js,.ts,.tsx src --ignore-pattern node_modules/",
"test": "jest --verbose --colors --coverage",
Here's my eslint config file:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".ts", ".tsx"],
"paths": ["src"]
}
}
},
"rules": {
...
}
}
}
An update to Visual Studio Code fixed this for me.
I was unwittingly on a 2 year old version.
Fixed it by removing NODE_ENV in pipelines's .env due to this:
npm install (in package directory, no arguments):
Install the dependencies in the local node_modules folder.
In global mode (ie, with -g or --global appended to the command), it
installs the current package context (ie, the current working
directory) as a global package.
By default, npm install will install all modules listed as
dependencies in package.json.
With the --production flag (or when the NODE_ENV environment variable
is set to production), npm will not install modules listed in
devDependencies.
NOTE: The --production flag has no particular meaning when adding a
dependency to a project.
it happened to to.
tried hard to find the answer.
Apparently, eslint searchs for a roots in the working directory, or something like that, to find the modules to import.
It happens that i've had two apps in my project folder, and only one had the eslintrc.josn.
I fixed to use eslint on the entire project oppening the vs settings.json and add the following:
"eslint.workingDirectories": ["./app1","./app2"...]
if u have more than one app on ur project folder, u should try it

Watches not working in vscode? (Vuejs)

It took me a while to get the debugger to work within Visual Studio Code. Now the program breaks on set breakpoints inside of .vue files/components. But none of the watches seem to work. They are either undefined or unavailable, even when the variables have been created.
The settings I use in launch.json :
{
"name": "chrome debug",
"type": "chrome",
"request": "launch",
"port": 3000,
"url": "http://localhost:3000/admin",
"webRoot": "${workspaceFolder}",
"breakOnLoad": true
// "sourceMapPathOverrides": {
// "webpack:///src/*": "${webRoot}/*"
// }
}
I build my app through npm run build or npm run devbuild which, by my knowlegde, 'compiles' the .vue components into Javascript files. And then start the app with either npm start or nodemon index.js.
Package.json
"scripts": {
<...>
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"devbuild": "cross-env NODE_ENV=development webpack --progress --hide-modules",
<...>
},
Have you ever tried add a new script with nodemon? Something like this:
"newScript": "nodemon -L -e ts,json --watch . --exec \"npm run build
|| npm run devbuild\""
-L = Though this should be a last resort as it will poll every file it can find.
-e = By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions. If you use the --exec option and monitor app.py nodemon will monitor files with the extension of .py. However, you can specify your own list with the -e (or --ext) switch like so: nodemon -e js,jade
--watch . = To watch all the changes on the path, in this case all the code on the current path.
(I got all of this information from the documentation.
then, run the command:
npm run newScript

npm pre commit not working

I am using npm precommit hook, but it is not stopping a file with issues to be committed, nor am I getting the message "Pre commit checks" when I try to commit a file.
Package Json:
{
"name": "myfolder",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 0",
"precommit-msg": "echo 'Pre-commit checks...' && exit 0",
"lint": "csslint global/css"
},
"author": "SR",
"license": "ISC",
"dependencies": {
"csslint": "^1.0.4",
"jshint": "^2.9.4",
"pre-commit": "^1.2.2"
},
"pre-commit": [
"precommit-msg",
"lint"
],
"devDependencies": {
"pre-commit": "^1.2.2"
}
}
Please, make sure that your 'package.json' file is in the same folder, where '.git' folder is (where git repository was initialized). When you install 'pre-commit' package, 'pre-commit' file should appear under '.git/hooks/'.
Just FYI I had this issue because the pre-commit file was missing in the hooks folder.
Running npm i pre-commit --save-dev again created the file and solved it for me.
Have't managed to implement it with few "pre-commit" NPM modules (#fastify/pre-commit, monorepo-staged-precommit) so implemented it "manually" with adding tools/pre-commit.sh file into repo with content like:
#!/bin/sh
DIR='web'
echo "Pre-commit actions (NPM tests for $DIR)..."
cd $DIR && npm run test
and updating package.json with:
"scripts": {
"test",
"install-precommit": "cp ../tools/pre-commit.sh ../.git/hooks/pre-commit"
This solution has some limitations (like instead of automatic installation need to ask somewhere in "README" about npm run install-precommit and I'm not sure how it would work on Windows especially without Git Bash) but it worked for me.
Notes:
Other pre-commit NPM packages either didn't work as well or asked for NVM and other extra tools which I don't want devs to install for such small task.
pre-commit.sh may has any name and don't be executable - "install-precommit" task and git care about.

Automating Nuget Package Push With .NetCore RC2

I am currently working on a .NET Core library that I am going to use as a NuGet package in another project.
I have been able to successfully package the project using the "dotnet pack" command in the project directory, and upload that package to MyGet.
I would prefer to automate this process of pushing the NuGet package by using the "nuget push" command.
My issue is that the "scripts" property defined in the project.json file does not seem to be executed on pack or build. I expected that these scripts would be executed when the corresponding event occurs, but they seem to have no effect as I do not see anything output to console when I build, with or without he verbose tag.
I understand that MyGet is able to update a package feed based on a Git repository, but I would like to understand if there is some issue with executing a script currently using a project.json. Ideally I want to use the nuget push command after pack successfully executes.
Here is my project.json file :
{
"version": "0.0.1",
"scripts": {
"postbuild": [ "echo build" ],
"prebuild": "echo build",
"postpack": "echo build",
"postpublish": "echo build",
"postrestore": "echo build",
"prepack": "echo build",
"prepare": "echo build",
"prepublish": "echo build",
"prerestore": "echo build"
},
"dependencies": {
"NETStandard.Library": "1.5.0-rc2-24027"
},
"frameworks": {
"netstandard1.5": {
}
},
"buildOptions": {
"allowUnsafe": false,
"debugType": "portable",
"emitEntryPoint": false,
"xmlDoc": false
},
"commands": { },
"packOptions": {
"files": {
"include": "%project:Directory%/bin/release/*.nupkg"
}
},
"configurations": {
"Debug": {
"buildOptions": {
"define": [ "DEBUG", "TRACE" ]
}
},
"Release": {
"buildOptions": {
"define": [ ]
}
}
}
}
RC2 replaced prebuild and postbuild with precompile and postcompile.
You can use the postcompile to automatically generate the nupkg and to push the package to a nuget server using
"scripts": {
"postcompile": [
"dotnet pack --no-build",
"\"%project:Directory%\\..\\..\\nuget.exe\" push \"%project:Directory%\\bin\\%compile:Configuration%\\%project:Name%.%project:Version%.nupkg\" -source nugetserver -ApiKey key"
]
}
This will automatically call the dotnet pack using the project.json file that exists in the project directory. Then it will push the nuget package to the specified nuget server.
Unfortunately there is no variable to specifiy the build configuration therefore in the above path you will have to manually change it when you switch between debug and release configuration.
The above uses %compile:Configuration% to specify the current build configuration.
The answer to the current build configuration comes from
How to run scripts based on solution configuration in ASP.NET Core RC2
Visual Studio 2017
In Visual Studio 2017 you can use the dotnet nuget push command by editing the csproj file and using the following command
<Target Name="PushPackage" AfterTargets="Pack">
<Exec Command="dotnet nuget push "$(MSBuildProjectDirectory)\bin\$(Configuration)\$(AssemblyName).$(Version).nupkg" -s nugetserver -k apikey" />
</Target>

webpack-dev-server does not watch for my file changes

When I change my files while webpack-dev-server is running, the bundle's files are not updated.
Here are my webpack.config.js and package.json files, as you can see from my npm script, I've solved running webpack watch and webpack-dev-server in the same command (npm run watch & webpack-dev-server --content-base ./ --port 9966):
webpack.config.js:
'use strict';
var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {
devtool: 'sourcemap',
entry: ['./js/main.js'],
output: {
filename: 'bundle.js',
path: __dirname + '/assets',
publicPath: __dirname + '/'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: [
ReactStylePlugin.loader(),
'jsx-loader?harmony'
]
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader')
}
]
},
plugins: [
new ReactStylePlugin('bundle.css'),
new webpack.DefinePlugin({
'process.env': {
// To enable production mode:
//NODE_ENV: JSON.stringify('production')
}
})
]
}
package.json:
{
"name": "reactTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack",
"web": "npm run watch & webpack-dev-server --content-base ./ --port 9966"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.10.1",
"extract-text-webpack-plugin": "^0.3.8",
"jsx-loader": "^0.13.1",
"react-style-webpack-plugin": "^0.4.0",
"style-loader": "^0.10.2",
"url-loader": "^0.5.5",
"webpack": "^1.8.5",
"webpack-dev-server": "^1.8.0"
},
"dependencies": {
"react": "^0.13.1",
"react-style": "^0.5.3"
}
}
my directory structure is:
assets
bundle.css
bundle.css.map
bundle.js
bundle.js.map
js
AppActions.js
Profile.css.js
ProfileList.js
main.js
AppConstants.js
AppStore.js
Profile.js
ResultPage.js
package.json
index.html
node_modules
webpack.config.js
every file inside assets directory is generated by webpack
In order to get webpack to watch my file changes (Ubuntu 14.04), I had to increase the number of watchers (I had increased the number before, but it was still too low):
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Source in the official docs: https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers
I first suspected the cause to be fsevents which doesn't work on Ubuntu, but this apparently wasn't the case.
Furthermore, because now the watching and re-compiling worked, but the automatic browser refresh part didn't work, I added the --inline param to the answer of #deowk which enables the "inline mode":
webpack-dev-server --content-base ./ --port 9966 --hot --inline
Quote from the official docs: "The easiest way to use Hot Module Replacement with the webpack-dev-server is to use the inline mode."
Source: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement
you need to run webpack-dev-server with the --hot flag:
webpack-dev-server --content-base ./ --port 9966 --hot
Then you can access the hot-loading version localhost:9966/webpack-dev-server/
You don't need to run watch as well.
update:
This entry in your webpack config must change:
entry: ['./js/main.js'], --> entry: ['webpack/hot/dev-server' , './js/main.js']
Change your publicPath entry:
publicPath: '/assets/'
#funkybunky identified the right problem but (IMHO) fixed it the wrong way. At least in my case, webpack was trying to watch every file it used, including a deep chain of thousands of files of dependencies pulled from npm. I added this to my config, per the docs:
devServer: {
watchOptions: {
ignored: /node_modules/
}
}
Of course you legitimately could have thousands of files that might need to be watched, in which case go ahead and raise the limit, but you're probably better off ignoring vendor libraries that aren't likely to change.
I'll put this here just in case it helps anyone. My problem was the same, but caused by inconsistent capitalization of directory names and webpack alias declaration.
I had a WebGL directory which i referenced in my aliases as webgl, and unfortunately this worked for the build, but didn't work for code watching.
In my case, the error was caused by an empty space in the directory name, by changing "Repository Name" by "RepositoryName", everything worked fine !
Figured I'd post my solution as well. I had the same problem getting Flutter apps to run on OS X due to my hard drive setup.
The gist is if your project folder is in a symlinked folder, detecting the file changes may not work on OS X. Previously, we were on Webpack 3.X, I believe, and live reload/refresh worked fine in the original folder. However, after upgrading to the latest Webpack (^5.75.0) and Webpack Dev Server (^4.11.1), the hot-reloading no longer worked for me.
My original project folder was:
/Users/blakemiller/h/somefolder/v2/my-widget
The "/h" there is a symlink to: /System/Volumes/Data/projects/home/web/
I'm not sure what happened when I upgraded OS X at some point, but the upgrade changed the folders in a way that I don't really understand.
Putting the folder here instead, fixed the issue for me (no symlink):
/Users/blakemiller/my-widget
I doubt this will work for many people, as my setup is probably pretty specific, but maybe it will help someone else save 5 hours down the road...