I am investigating the features of Lerna to try and speed up our bootstrap process which currently takes quite a long time.
When referring to bootstrap here I am referring to the process of running npm install with hoisting and linking local packages together
One of the things I am trying to do is only build the packages that I have changed in a branch. Take this example project
Package CLI
Package Header
Package Footer
Package WebApp : Depends on Header & Footer
With this scenario what I want to do in CI is:
If I only change the CLI project then only the CLI project should go through bootstrap -> build -> test
Only changing Header should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing Footer should do the process for Header, Footer and WebApp because we want to ensure the dependency hasn't broken anything
Only changing WebApp should do the process for Header, Footer and WebApp because we need to use the dependencies to check WebApp
The first thing I have looked at is using the jobs affected by a PR. This works for executing a script defined in the package.json, but only for the package itself and not its dependencies. In my example if I change CLI then the job only runs in the CLI package as I want, but if I change WebApp then it only runs in WebApp and it doesn't run on the dependencies Header and Footer. This is only for running an npm script rather than bootstrap anyway so I am not even sure this is the correct thing to be looking into.
Secondly I was looking into using task pipelines. So for example in the package.json of the WebApp I have
"dependencies": {
"header": "*",
"footer": "*"
}
And then in the Lerna.json I have
{
"version": "3.0.0",
...
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
]
},
"test": {
"dependsOn": [
"^build"
]
}
},
"useNx": true
}
As far as I can tell though when I run test on WebApp using $ npx lerna run test --scope=webapp I can't see any output relating to it doing anything with it's dependencies. Additionally, I still think this doesn't account for the bootstrap process needed before the build step.
I'm trying to host my webpages into Github pages but for some reason it seems to only show my Readme file.
GitHub repo: https://github.com/InquisitiveDev2016/InquisitiveDev2016.github.io
Website:
https://inquisitivedev2016.github.io/
GitHub Pages is doing what it is designed to do: hosting the contents of that repository.
The root of the question asker's repository only contained a single file (README.md). So there isn't an easy way to navigate to the other pages, e.g. repo/website/webpage.html.
Consider moving your web content into the root of your repository and renaming your default page to index.md or index.html, depending what type of file it is. (By convention the default page of most websites is called index.html, and this is what GitHub Pages will show by default if it exists.)
Github gives you multiple choices where it takes it sources from. By default its the root of the master branch, which will use the README.md in case there is no index.html.
But you can also switch to the docs/ folder in your repository settings. With that you can put the index.html under the docs/ folder.
See
In my case, I had to choose the branch gh-pages/root in Pages settings on GitHub.
I had a similar situation when deploying a static React app from create-react-app (so index.html was in /public instead of root) with gh-pages npm package.
I had to select a gh-pages as a branch and /docs as a folder at GitHub Project -> Settings -> Pages -> Folder/Branch dropdowns. It wasn't intuitive since I didn't have /docs anywhere in my project files, but I'm glad that it eventually worked!
Create an index.html in the root and insert the line
<meta http-equiv="Refresh" content="2; url=public/index.html">
Or so it worked for me with a Vue CLI project I had this trouble with.
if you want to access to index.html,
try to write
https://your-github-deploy-address/index.html
so just add '/index.html' at the end of the address!
(this is how I solved my case)
The simplest solution to overcome this is put the index.html file in the outermost folder along with the readme.md
Please change the HTML file to index.html. This simple thing had me struggling for 6 hours to find this.
My HTML name before was base.html; this shows the read me file only.
After changing to index.html the file opened without any problems.
The steps to resolve this issue is from best practice is to go the your project folder. You should change what ever you named your root or initial page to index.html as mentioned above. Then open your project in git bash on your system, perform your normal git steps like,
git add
git commit -m " change to index.html"
git push origin master {depending on what you named your root branch}
Then go to settings and there you go (wow wow)
after one or two refresh, your site will be live
For me, the problem was the docs folder was moved to .gitignore automatically. You have to delete docs from .gitignore, commit and push.
Change the GitHub Pages source to gh-pages with folder as /(root)
For me, this solution solves the issue:https://github.com/gitname/react-gh-pages
Open the package.json file, add two properties as below:
Add a homepage property in this format*: https://{username}.github.io/{repo-name}
For a project site, that's the format. For a user site, the format is: https://{username}.github.io. You can read more about the homepage property in the "GitHub Pages" section of the create-react-app documentation.
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true,
Add a predeploy property and a deploy property to the scripts object in :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
To summer up, if your repository does not have an Index.html it will show the ReadMe file.
Thus in order to correct it all you need to do is add an index.html or index.md file to your folder and use that as main.
From there all the others will be access through a link on this page. Similarly to a webpage.
I have a project with an existing webpack setup and it's unrelated to Vue.
Until now I have multiple entry points setups and some of these entry points are opening some iframes popups, and the plan is to build these iframes with VUE.
This means that I will also have multiple VUE entry points, this shouldn't be a problem but what I can't figure out is:
what is the best way to add VUE-cli into this already existing setup and use the same node_modules folder
Also to be able to add the vue-cli build commands to be run/triggered after my existing webpack build commands.
Let me know if more details are needed?
I've figure it out and it turn out that you can have both in the same project.
I've used vue create on my existing project folder and there is a prompt with a merge options.
Unfortunately it deleted my dependencies but was not such a big deal. Just had to reinstall them.
Now my project's webpack configuration remained completely separate form vue-cli which is handled by the vue.config.js and this is exactly what I wanted.
I am using something like this to build everything at once:
"build": "webpack --config webpack.prod.js && vue-cli-service build"
I'm building a Wordpress theme and have recently switched from using Prepros to Webpack/Babel/PostCSS etc... to do all of the SASS and Javascript compiling manually so that I can add more custom functionality.
The last functionality of Prepros that I need to recreate is the automatic file uploading via FTP when a file is edited. I've been searching around for a while now and can't really find any Webpack plugins that will automatically upload files to a server via FTP whilst also giving me lots of options (i.e. specifying file extensions to upload/ignore).
What's the best way to automatically upload files to a server via FTP once they have been changed (saved) using Webpack?
At the moment it looks like my best option is webpack-ftp-upload-plugin, but it doesn't look like there are many customisation options as I mentioned above...
Use this script after completing build ftp-deploy. Right after the compilation, the bulldog will be deploy. You do not need to have a plugin in the webpack
"scripts": {
"build": "concurrently \"yarn prod"\ \"yarn deploy\"",
"prod": "webpack --config webpack.config.js --mode production",
"deploy": "node deploy"
}
For development purposes i don't use npm run serve because i'm integrating Vue with my backend project. Instead, i wrote my own command in package.json:
"dev": "vue-cli-service build --mode development --watch"
And it all works great, but it generates tons of webpack's hot-update.js files in my build dist directory and the problem is that they don't get deleted.
Is there a way to configure vue-cli/webpack in such way that these files are automatically deleted or not even created in the first place?
I believe the development mode will automatically enable hot reloading when the watch flag is enabled. Even though without the watch flag the development mode flag on build will not include hot reloading. Confusing. I had to add this to my vue.config.js file:
module.exports = {
chainWebpack(config) {
config.plugins.delete("hmr")
},
};
Note: that will ruin
npm run serve