I work with two repo's; one with source code and one with E2E tests using CucumberJS:
application-repo/
application-e2e/
I would like to run npm run watch in the second repo and wait for changes to files in the first repo; because I want to have my CucumberJS tests run on changes to the source-code. The place I work dictate me not to have the e2e-tests in the same repo, as the source code.
Similar question, but with pm2 instead of npm-watch / watch:
Watch files outside the current directory using pm2
It was a lot easier than I thought, at least when using watch and not npm-watch, but probably both can be used the same way.
Here's my package.json of the second repo:
{
"name": "application-e2e",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch":"watch 'echo hello' ../application-repo/", // First repo
(...)
When running npm run watch in the second repo, changes made in the first repo will make it write hello in the terminal of the second repo.
Related
I'm trying to make changes to the site I have deployed on GitHub Pages, but no matter how many times I deploy it WON'T update the "gh-pages" repo I need it to.
I've updated the code, then deployed about 3 times now and it says "Published":
https://i.imgur.com/0LAXkXy.png
I've given it half hour now to update:
https://i.imgur.com/8TNGFj0.png
but it STILL hasn't applied the changes and is still using the last deployed version:
https://i.imgur.com/Lxd4KwF.png
I've tried clearing cache, I've tried changing random files just to have more changes to deploy and see if it updates, nothing is working.
How do you update GitHub Pages after deploying? It's always been random if it would update or not for me. Sometimes I'll "run deploy" and it will update pages, and sometimes it won't. Right now it's not updating no matter how many times I try.
Do I have to "unpublish" then publish it again with the changes I made? How come it won't just update on a new deploy? Why is it stuck on the deploy I made 2 days ago?
EDIT:
And I have:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
in the package-json, it's just always random when I actually run "deploy" though whether the "gh-pages" repo ACTUALLY gets updated.
1-The solution was to edit the index.html file in the GitHub website. The website then updates on the web as expected.
Only changing one line into index.html made it "load" the "true" index.html and not all the previous commit.
2-If an empty CNAME file is located in the project then make sure the CNAME file contained a line with the domain you want to be built.
I have run into a problem, where I don't understand what and most importantly why it is not working.
Here is the status quo:
I have recently set up a basic html/css portfolio website using gh-pages. I followed the YouTube tutorial from Traversy Media. On that day everything worked as expected. I had my site up and running and all was good. In the package.json I have added the deploy: gh-pages -d dist script (just like it was mentioned in the video.
Now, I haven't done any work on this website since then and needed to update something tonight. Once I pushed all the changes to the main branch I wanted to deploy to gh-pages again, using the script above. However, all I get from this command is this:
> app#1.0.0 deploy
> gh-pages -d dist
sh: gh-pages: command not found
patricklemmer#Patricks-MBP app %
I was under the impression that this command actually deploys the current version of the site which is sitting on main on the gh-pages branch, so that all the updates are then visible on the website.
Please help me understand, if this thought is wrong already.
What is the correct workflow if I want to push any changes to my live site on gh-pages.
Here is my set up:
Branches
main
gh-pages
My package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"deploy": "gh-pages -d dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"homepage": "https://mywebsite.com",
"dependencies": {
"gh-pages": "^4.0.0"
}
}
What am I missing? Although I have worked with Github for a couple of months now, some things just don't seem to stick or makes sense to me. I would appreciate a short explanation of my scenario. I did a lot of Googling before writing this post, but none of the answers/threads helped me so far.
TIA
I already had published some website on GitHub pages with no issue. My common workflow is to build a website, upload in the root (/) or docs (/docs) directory of my repository and set up GitHub Pages in the settings.
This is my first time using Ionic. I wrote a website and I build it by running ionic build --prod.
Than I uploaded my contents to the /docs directory of the repo.
When I visit the website https://<nickname>.github.io/<myrepo>/ it leaves me in a blank page. Inspecting with Google Chrome dev tools, I can see that scripts are referred to https://<nickname>.github.io/script.js instead of https://<nickname>.github.io/<myrepo>/script.js
How can I make it work? What I am doing wrong?
You can find the full source code of my project here. You can build it by yourself and try if there is something wrong. The site is functional when I execute it on my local web server for testing.
How to make any React website work with GitHub Pages
Prerequisites
npm installed
directory containing the React project
git repository set on this directory and linked to the remote on GitHub
Steps to follow
Run npm install gh-pages --save-dev
Edit the package.json file:
Add this line: "homepage": "http://githubname.github.io/repository". Use your nickname and repository name
Add these lines in the scripts section:
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Push a commit
git add .
git commit -m "Create a React app and publish it to GitHub Pages"
git push origin master
Your website is available at http://githubname.github.io/repository
For more info see this page
Additional steps for Ionic 5
If you are using Ionic 5, some errors can still occur.
In this case, visit the website on http://githubname.github.io/repository and open the Chrome Inspector Tools (CTRL + SHIFT + I).
Look at the Console: some JS or TS script could be not loaded. You can see that the browser is looking at the scripts in a wrong path.
By manually editing the index.html you can point the script to the right URLs.
Upload the edited index.html in the gh-pages branch of your GitHub repo and you are good to go.
Both use the README.md as the description when you publish. A common practice is to use a single shared file.
But what if I need to have the different Readme and still publish it from a single local repo with no manual editing/replacement
PS
I tried to use "readme": "npm-readme.md" in package.json but it displays a value of this field, not the content of а file
For some reason zavr's answer (using README and README.md) didn't work when I tried it (probably the logic used by NPM has changed). But what did work is putting the GitHub README into .github directory (this is allowed according to their docs), and using the root README.md as the version for NPM along the lines of
<!-- README for NPM; the one for GitHub is in .github directory. -->
<badges>
<a brief description>
Please refer to the [GitHub README](https://github.com/<your repo>#readme) for full documentation.
Luckily, for GitHub .github/README.md seems to take priority over README.md.
Update 2021-02-06: a quick note about best practice. NPM wouldn't let you update the readme without bumping the package version, and in reality you often need to make updates, sometimes minor, to the docs. So I'd recommend to provide full docs in the GitHub readme, but still give a short description of the library on NPM, which in combination with keywords field of package.json will make the package more discoverable. It's also a good idea to include badges in the NPM readme because that will increase the quality score displayed by NPM (see discussion of "branding" score in this article).
Good question mate! I prefer GitHub to NPM for a number of reasons, such as
a) the column on NPM is to narrow and all tables start to scroll
b) there is no padding when images are aligned to left of right
c) the TOC navigation does not work because anchor links are generated differently on GitHub and npm
Therefore I found a solution: add a README file, which will be read by NPM, and keep README.md file which will be read by GitHub. Easy-peasy but no guarantee it will continue to work.
One solution can be to use two readme files and rename them using npm scripting during npm publish.
This can be done as follows.
On source control, we would have the following files:
README.md - This is the default git readme where you would document your source.
npm.README.md - This would be the readme that would be seen on NPM.
Next, we would have the following in package.json (note that some contents are omitted).
{
...
"scripts": {
...
"build": "...",
"use:npmReadme": "mv 'README.md' 'git.README.md' && mv 'npm.README.md' 'README.md'",
"use:gitReadme": "mv 'README.md' 'npm.README.md' && mv 'git.README.md' 'README.md'",
"prepublishOnly": "run-s build use:npmReadme",
"postpublish": "npm run use:gitReadme"
},
"dependencies": {
...
},
"devDependencies": {
...
"npm-run-all": "^4.1.2",
...
}
}
In devDependencies, the npm-run-all package is used. This allows using the run-s command to run specified npm scripts sequentially.
in the scripts section, we have the following scripts:
Scripts to Rename README files
use:npmReadme - This simply backs up the current git specific readme, and then renames npm.README.md to be the default README.md.
use:gitReadme - This simply reverts back to using the git specific readme as the default README.md.
prepublishOnly
This is executed BEFORE the package is prepared and packed, and ONLY on npm publish. (Does not run with npm install).
Here, the solution is built, and then we run use:npmReadme.
postPublish
This is executed AFTER the package is published on npm.
Here, we run use:gitReadme to revert the readme files back to their original state.
More information on prepublishOnly and postPublish can be found here.
keshav.bahadoor's answer inspired me to use similar approach in GitHub workflows.
I'm using it as following:
- uses: actions/checkout#v2
...
- run: mv NPM-README.md README.md
...
- run: npm publish --access public
I'm moving NPM-README.md to README.md only during workflow and not committing.
rest of the workflow yaml file
Note: This is working for GitHub workflows, not makes sense to use in your local.
(the more good one) If we named the npm readme to README.md and the GitHub readme to readme.md. Then we can add readme.md for the npm ignore .npmignore and add the README.md for gitignore .gitignore.
(the more bad one) Add npm.README.md and git.README.md. Remove the npm. or git. when commiting or publishing the git or npm.
I'm using a module for my angular app called angular-translate. However, I've had to make a few small modifications to the source code to get everything working the way I'd like, and now I want to persist those changes on npm install. A colleague suggested that I fork the repo of the source code and point to my forked repo as a dependency, which I've tried in these ways, e.g.
npm install https://github.com/myRepo/angular-translate
npm install https://github.com/myRepo/angular-translate/archive/master.tar.gz
The first gives me a directory like this with no build. Just a package.json, .npmignore, and some markdown files
-angular-translate
.npmignore
.nvmrc
CHANGELOG.md
package.json
etc
The second npm install gives me the full repo, but again I don't get a build like when I use the command npm install angular-translate. I've seen some dicussion of running the prepublish script, but I'm not sure how to do this when installing all the modules. I've also tried publishing the fork as my own module to the npm registry, but again I get no build, and I'm not sure that's the right thing to do...
I apologise for my ignorance on the topic. I don't have a huge amount of experience with npm. Would love to get some feedback on this issue. It seems like it could be a common enough issue when modifications need to be made to a package's source code? Maybe there's a better solution?
Try npm install <ghusername>/<repoName>, where <ghUsername> is your GitHub username (without the #) and <repoName> is the name of the repository. That should correctly install it. You will most likely want to use the --save or --save-dev flag with the install command to save dependency in your package.json.
If that isn't working correctly, check the contents of your .npmignore file.
Don't panic if the install command takes a long time; installing from a git repository is slower than installing from the npm registry.
Edit:
Your problem is that in your case, dist/ is not committed to the repo (since it is in the .gitignore). That is where the actual code lives. dist/ is built from the files in src/ before the package is published to the npm registry, but dist/ is never committed to the repo.
It's ugly, but in this case you will have to remove dist/ from the .gitignore and then run:
npm run build
git add .
git commit
git push
(Ensure that you have run npm install first)
You then should be able to install from github.
There might be another way to do this using a prepare script, but I'm not sure if that's possible; I've never tried it. Edit: Cameron Tacklind has written an excellent answer detailing how to do this: https://stackoverflow.com/a/57829251/7127751
TL;DR use a prepare script
and don't forget package.json#files or .npmignore
Code published to npmjs.com is often not what's in the repository for the package. It is common to "compile" JavaScript source files into versions meant for general consumption in libraries. That's what's usually published to npmjs.com.
It is so common that it's a feature of npm to automatically run a "build" step before publishing (npm publish). This was originally called prepublish. It seems that Npm thought it would be handy to also run the prepublish script on an npm install since that was the standard way to initialize a development environment.
This ended up leading to some major confusion in the community. There are very long issues on Github about this.
In the end, in an effort to not change old behavior, they decided to add two more automatic scripts: prepublishOnly and prepare.
prepublishOnly does what you expect. It does not run on npm install. Many package maintainers just blindly switched to this.
But there was also this problem that people wanted to not depend on npmjs.com to distribute versions of packages. Git repositories were the natural choice. However it's common practice to not commit "compiled" files to git. That's what prepare was added to handle...
prepare is the correct way
If you have a repository with source files but a "build" step is necessary to use it,
prepare does exactly what you want in all cases (as of npm 4).
prepare: Run both BEFORE the package is packed and published, on local npm install without any arguments, and when installing git dependencies.
You can even put your build dependencies into devDependencies and they will be installed before prepare is executed.
Here is an example of a package of mine that uses this method.
Problems with .gitignore
There is one issue with this option that gets many people.
When preparing a dependency, Npm and Yarn will keep only the files that are listed in the files section of package.json.
One might see that files defaults to all files being included and think they're done.
What is easily missed is that .npmignore mostly overrides the files directive and, if .npmignore does not exist, .gitignore is used instead.
So, if you have your built files listed in .gitignore, like a sane person, and don't do anything else, prepare will seem broken.
If you fix files to only include the built files or add an empty .npmignore, you're all set.
My recommendation
Set files (or, by inversion, .npmignore) such that the only files actually published are those needed by users of the published package. Imho, there is no need to include uncompiled sources in published packages.
Original answer: https://stackoverflow.com/a/57503862/4612476
Update for those using npm 5:
As of npm#5, prepublish scripts are deprecated.
Use prepare for build steps and prepublishOnly for upload-only.
I found adding a "prepare": "npm run build" to scripts fixed all my problems.
Just use the command npm install git+https://git#github.com/myRepo/angular-translate.git. Thanks.
To piggyback off of #RyanZim's excellent answer, postinstall is definitely a valid option for this.
Either do one of the following:
Update the package.json in your forked repo to add a postinstall element to scripts. In here, run whatever you need to get the compiled output (Preferred).
Update your package.json, and add a postinstall that updates the necessary directory in node_modules.
If you've forked another persons repository, then it might be worth raising an issue to illustrate the issue that installing their package through GitHub does not work as it does not provide the necessary means to build the script. From there, they can either accept a PR to resolve this with a postinstall, or they can reject it and you can do #2.
If you are using yarn like me. Imagine that you want to use a package like this:
yarn add ghasemikasra39/gridfs-easy --save where the ghasemikasra39 is the username and gridfs-easy is the name of the repo