How to change file directory after build? - html

How to move my index.html file to 'dist' folder after build? Before npm install and npm run build folder 'dist' s not located in my project it appears after first build and after that I'd like to move automatically my index.html file to this location.
I was searching information on the Internet, found only two thing that attatched to my eyes.
One was "html webpack plugin" but it only creates a new empty index.html folder after build
Second, I found some plug in on github that theoretically can move file to choosen directory but I not working

You can just issue a cp command at runtime. Inside your package.json file, in the scripts section, add an additional command. IE
"scripts": {
...
"build": "react-scripts build && cp build/index.html ../dist/index.html",
...
},

Related

Downloaded ZIP from from CodeSandbox (Vue.JS page) index.html produces blank page

My first ever Vue.JS / Vue2Leaflet app works fine on codesandbox.io, but when I download the ZIP and open the index.html file, it is blank?
Do I need to do something to the code base (compile? install additional dependencies?) before it works? I am looking for something I can upload on a server...
Alternatively, how difficult would it be to convert this to a single .html page? (Single File Component?)
I'm not sure how this project is configured but I advise you to convert it to a default #vue/cli setup.
npm install && npm install -D #vue/cli-service #vue/cli-plugin-babel vue-template-compiler postcss-import postcss-url && npm install core-js
Edit .babelrc so it just contains:
{
"presets": ["#vue/cli-plugin-babel/preset"]
}
Create public folder and move index.html in it.
Create src folder then move App.vue and index.js into it
Rename index.js to main.js
Edit main.js to replace template: '<App/>', components: { App } by render: h => h(App)
Delete build and config folders
Edit package.json to add
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
And run either npm run serve or npm run build
Also, in App.vue :
Replace :key="office.id" by :key="'office' + office.id"
Replace :key="factory.id" by :key="'factory' + factory.id"
Replace :key="warehouse.id" by :key="'warehouse' + warehouse.id"
(because you can't have the same components (l-marker) within the same parent with the same keys)

How to add a Node Module's script from the package.json file to the Root package.json file

I'm making an NPM that would make setting up Bootstrap 4 for live editing faster with 1 command (after installing).
I have a few script in my custom_Module package.json file that I want to programmatically add to the Root package.json file in the script definition.
How would I go about it?
I can install the dependency modules, but I cannot run the commands with npm run SCRIPTNAME
custom_module:
"script":{
"kenobi": "node-sass --watch scss -o dist/css";
"hellothere": "concurrently \"npm run kenobi\" \"live-server --port=66\""
}
note: I want to move these script to the root package.json file.
File structure for reference:
ROOT
-package.json //Root package.json
...
-node_module
-custom_Module
-package.json. // Node Module's package.json
Feature is not available.
You're just going to need to add the script to the Root package.json.

Jekyll ignores second configuration file

I’ve created two config files on the root of my site _config.yml and _production.yml.
I’m using NPM to build my site using the following script:
"scripts": {
"build": "JEKYLL_ENV=production jekyll clean && jekyll build --config _config.yml, _production.yml"
},
But the second file, where i overwrite the Sass output style get’s ignored.
Same result when using bundle exec.
I’m using jekyll 3.8.6, node v10.15.0, npm 6.10.2, ruby 2.3.7p456
Any ideas on this ?
You can have a look here GitHub, 7766 or on stackoverflow.
Solution a) skip the space between the comma separated list
jekyll build --config _config.yml,_production.yml
Solution b) wrap the config file list with quotes
jekyll build --config "_config.yml, _production.yml"

How to configure package.json to add a "self compiled binary" as a dependency?

I am very new to the concept of npm-install. Please throw some insights into where I might be going wrong. I have a .js file through which I am supposed to invoke a binary with some command line arguments.I did write package.json setting the main parameter to the javascript file and I am using preinstall script that compiles the code and creates a binary that is supposed to be used by my java script file.
Couple of questions:
How do I make package.json take this compiled binary as dependency for the js file?
npm install runs fine for me but I do not see any output folder whatsoever. I was hoping it would generate a .node_module in pwd and copy the contents onto bin/ folder in that. May be, I am missing something.
npm info prepublish test#0v.0.1
npm verb from cache <pwd>/package.json
npm verb readInstalled returning test#0.0.1
npm verb exit [ 0, true ]
npm info ok
Can someone please through some insights into this issue?
You don't have to include your binary file in package.json. If you're using Express, put it in the node-modules folder within the parent directory. Otherwise, you can either specify the whole path to the file where you call it or put the file in the parent directory. For global installations, the node-modules folder is usually created at: C:\Users\[Username]\AppData\Roaming\npm\node_modules.
I figured out a way to handle it. Using a js module and using my node as required in that module causes npm to setup my node in node_modules/ folder. I used a pre-install shell script to compile my binary and used the relative path to use the binary upon execution.
Thanks for all who replied.

Jekyll overwrites output folder and CSS generated by Compass

I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.