How to deploy a budo/browserify project's build to GitHub Pages? - github

I want to deploy a clone of this Virtual Art Gallery project to GitHub Pages.
However, I'm only able to deploy the base html site rather than the build site which shows a 404 page on GitHub.
Steps I've taken:
Created a GitHub Pages site at USER.github.io and added the code below to the package.json:
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
In another run I created a new repo USER.github.io/REPO and added the code below to package.json:
"homepage": "https://USER.github.io/REPO",
...
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
I've installed gh-pages and ran npm start, npm run build, npm run deploy.
In some attemps, deploy returned Error: ENOENT: no such file or directory, stat 'directory/BUILD' but I fixed this by running npm start first.

Related

Deploy a custom UI5 library in SAP BAS

I need to build some custom Fiori libraries with SAPUI5.
On the internet, I found many tutorials about how to build such libraries but no tutorial shows how I can deploy it. The only tutorials I found about the deployment are using the old Web IDE but we're using the SAP BAS (SAP Business Application Studio) which doesn't have those functions.
So then I learned about how SAP handles the custom libraries and tried to deploy it like a normal Fiori app by creating a ui5-deploy.yaml:
specVersion: '2.5'
metadata:
name: 'zcalibtest'
type: library
builder:
resources:
excludes:
- /test/**
- /localService/**
customTasks:
- name: deploy-to-abap
afterTask: generateCachebusterInfo
configuration:
target:
destination: {DESTINATION}
url: {URL}
credentials:
username: env:DEPLOY_USERNAME
password: env:DEPLOY_PASSWORD
app:
name: Z_CA_LIB_TEST
package: ZCA_TEST
transport: {TRANSPORT}
... and running the following NPM "deploy" script:
npm run build && fiori deploy -y --config ui5-deploy.yaml && rimraf archive.zip
But that gives me the following error:
sh: 1: fiori: not found
So I think that's not the way to go. But how can I do this? I couldn't be the only person on the planet that is using SAP BAS and tries to deploy a custom library.
Edit:
My package.json file:
{
"name": "zcalibtest",
"version": "1.0.0",
"private": true,
"devDependencies": {
"#ui5/cli": "^2.9.3",
"#sap/ux-ui5-tooling": "^1.5.5",
"karma": "^6.1.1",
"karma-chrome-launcher": "^3.1.0",
"karma-cli": "^2.0.0",
"karma-ui5": "^2.3.3",
"ui5-middleware-livereload": "^0.5.1"
},
"ui5": {
"dependencies": [
"ui5-middleware-livereload"
]
},
"scripts": {
"build": "ui5 build --clean-dest",
"deploy": "npm run build && fiori deploy -y --config ui5-deploy.yaml && rimraf archive.zip",
"start": "ui5 serve --open test-resources/path/to/lib/zcalibtest/Example.html",
"testsuite": "ui5 serve --open test-resources/path/to/lib/zcalibtest/qunit/testsuite.qunit.html",
"test": "karma start --browsers=ChromeHeadless --singleRun=true"
},
"license": "UNLICENSED"
}
For the deploy part: you need to add the package "#sap/ux-ui5-tooling" (both in your devDependencies and in your ui5 dependencies) and rimraf (only in your devDependencies).
For the build part: build steps for libraries are slightly different so yours should be similar to these (maybe you don't need all the steps..). For the building part you need to add only bestzip to your devDependencies I guess
"scripts": {
"build": "npm run clean && ui5 build --include-task=generateManifestBundle generateCachebusterInfo && npm run flatten && npm run clean-after-flatten && npm run zip",
"zip": "cd dist && npx bestzip ../ExampleLibrary-content.zip *",
"flatten": "cp -r dist/resources/name/space/examplelibrary/* dist && cp dist/resources/name/space/examplelibrary/.library dist ",
"clean": "npx rimraf ExampleLibrary-content.zip dist",
"clean-after-flatten": "rm -rf dist/resources dist/test-resources"
}
You can find more info about building libraries in this blog post from the SAP Community.

Opening a new powershell/windows terminal while react app is running

Hi I made two react apps which should interact with each other(both start with npm start). And I want to ask if it is possible to make a script to run the start up commands like a script file on Linux. (It will be like cd.. npm start then start powershell(not sure about this) then cd ... npm sart)
Sorry if the question is vague
You are looking for "concurrently",
npm i concurrently --save-dev
And then change commands in the "package.json"
"scripts": {
"dev": "concurrently --kill-others \"cd backend && node server.js\" \"react-scripts start\""
},
Now, You can run all commands at once with this;
npm run dev

VSCode git "npm command not found" [duplicate]

I've setup a node project with husky but when my collegue tries to run npm install on his Mac he gets the following error :
noa-be#1.0.0 prepare
husky install
sh: husky: command not found
npm ERR! code 127
npm ERR! path /Users/X/Desktop/Workspace/project
npm ERR! command failed
npm ERR! command sh -c husky install
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/X/.npm/_logs/2021-04-12T13_07_25_842Z-debug.log
These are the relevant package.json parts:
{
"scripts": {
"prepare": "husky install"
},
"devDependencies": {
"husky": "^5.2.0",
}
}
I thought this would be enough for husky to be installed when running npm install, but it's not. What am I missing?
If you are using nvm, you might want to create a file called .huskyrc in your home directory and add the following lines of code to it:
~/.huskyrc
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
I was struggling with the same exact problem for hours. Finally, I could install dependencies and start working on my project by doing this:
Temporarily remove the "prepare": "husky install" script from the package.json file.
Run npm i (npm install). Dependencies installed successfuly.
Add again the "prepare" script that you removed in step 1.
Run again npm i to install the husky git hooks, so husky can do its job from now on.
This error is also thrown by npm ci if the NODE_ENV is set to "production" pre-install
I've been able to solve the problem by upgrading to latest Husky version (7.0.1, from 5.2.0).
Git was also helpful, and told me that the files weren't executables. (Git V 2.24.1)
So I give them executable rights :
chmod +x PATH_TO_HUSKY_FILE
You'll need to execute this command for every hooks
I believe it could be version specific issue. Install version 6, npm i husky#6.0.0 --save-dev, and it should work as the husky doc says.
Apparently, when I did npm i husky --save-dev, it was installing "husky": "^0.8.1" for me for some strange reason, giving me the exact same error: sh: husky: command not found.
Method 1:
Update manually, in your package.json:
{
"scripts": {
"prepare": "husky install",
"create-hook": "husky add .husky/pre-commit \"npm test\"",
}
}
Then, run npm run prepare && npm run create-hook.
It should create .husky directory with .pre-commit file in it.
Method 2:
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npm test"
It worked in my terminal but not in VSCode version control. So had to force quite the vscode app and restarting it worked.
Faced this issue in Github Desktop.
solved it by quit Github Desktop and re-open it.
I was able to fix this by providing an explicit location for husky
"scripts": {
"prepare": "node_modules/.bin/husky-run install"
},
Using Lerna
When I upgraded husky from version 4 to 8 there was information todo first pre commit manually. For this purpose pre-commit bash script was generated in .husky directory.
What I had todo was simply run the command included in this file:
lerna run precommit --concurrency 2 --stream

How to fork and npm install in my project

I have a package
I would like to fork it, edit some stuff in order to make it fit into my project, but keep the ability to update from the original master.
I forked the project, and now I am stuck because when I npm install it, I have "unknown module angular-cesium"
the package.json scripts is has follow :
"scripts": {
"ng": "ng",
"demo:start": "ng serve",
"demo:build": "ng build --prod",
"demo:server": "nodemon --exec ts-node --project demo-server/tsconfig.json -- demo-server/src/main.ts",
"lib:build": "ng build angular-cesium; npm run copy:extra-files",
"lib:start": "ng build angular-cesium --watch",
"lib:publish": "npm run lib:build; cd dist/angular-cesium; npm publish; cd ...; npm run docs:push",
"test": "ng test angular-cesium",
"test:ci": "ng test angular-cesium --no-watch --browsers=ChromeHeadless",
"lint": "ng lint angular-cesium",
"e2e": "ng e2e",
"gh-pages": "gh-pages -d docs -b gh-pages",
"copy:extra-files": "cp README.md LICENSE.txt dist/angular-cesium",
"docs:run": "compodoc -p projects/angular-cesium/src/lib/tsconfig.compodoc.json --theme stripe -d docs -n \"Angular Cesium\" --watch --serve",
"docs:compile": "rimraf docs && compodoc -p projects/angular-cesium/src/lib/tsconfig.compodoc.json --theme stripe -d docs -n \"Angular Cesium\"",
"docs:push": "npm run docs:compile && npm run gh-pages && rimraf docs",
"heroku-postbuild": "npm run lib:build; npm run demo:build"
},
I tried to add "prepare:npm run lib:build"
I have the follow error :
Project 'angular-cesium;' does not support the 'build' target.
if I just try a npm publish I get the following
npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\Popolee\AppData\Local\Temp\npm-33912-632e340c\tmp\fromDir-ffb525d2\package.tgz'
My question is, how can I fork this library, and make a npm installable custom version that I can edit and install in my project when i want

Yarn upgrade-interactive always to `exotic`

I'm playing around with a centralized build setup which is hosted on github: https://github.com/skybrud/sky-build-setup/tree/master
In the npm module this repo is used, I have the following package.json:
{
"name": "sky-crop",
"version": "1.0.5",
"description": "Vue component for cropping images",
"main": "dist/skycrop.js",
"scripts": {
"vanilla": "rimraf ./node_modules && yarn run dist",
"build": "rimraf ./dist && webpack --config ./webpack.config.js",
"dist": "yarn install && yarn run build"
},
"build": "module",
"author": "Skybrud.dk",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/skybrud/sky-crop.git"
},
"dependencies": {
"sky-window": "^1.0.4"
},
"devDependencies": {
"sky-build-setup": "https://github.com/skybrud/sky-build-setup.git#semver:^1.0.0"
}
}
Here's my issue. When running yarn upgrade-interactive I always get the following:
For some reason the to part always refers to exotic in stead of being up to date.
Can someone point me in the right direction about what is going on?
And what does exotic exactly mean? I haven't been able to locate the description anywhere.
Yarn can't manage dependencies versions for dependencies not belonging to the npm packages repository.
In your case, the devDependency sky-build-setup is resolved using a github url, where yarn doesn't have a way of knowing if there is a new version of the dependency nor how to update it. The dependencies not belonging to npm (i.e. the ones resolved via urls or file:) are marked as exotic in the interactive-upgrade process.
On the other hand, the dependency sky-window comes from npm and yarn can assess if you are using the latest version and eventually update it for you.