I currently have my directories setup such that my whole React project, including index.html, is inside my src/ directory. When I run npm run build, all of my .js/css files are put into my /dist folder. However, my index.html isn't being included. I installed html-loader and set it up in my webpack.config.js as such:
{
test: /\.html$/,
include: APP_DIR, //let APP_DIR = path.resolve(__dirname, 'src')//
loader: 'html-loader'
}
My understanding was that this would add my index.html file into my dist/ after running a build but it's not. I've looked at the html-webpack-plugin but what I gather from that is that it generates an index.html file for you but I don't need one generated for me. I just want to include the one I already created.
I later realized that the html-webpack-plugin allows for a template option which, in my case, would be my own src/index.html file. It just copies it over into the index.html it generates in my dist/ folder.
Related
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",
...
},
I have researched extensively and have not been able to find an answer to this issue. I’m thinking it might still not be solved! Is there any way to change the path of a React app (in webpack) so that the index.html file can be in the root, and not in a public folder? This would be so I can host my portfolio on github pages, which requires the index.html file to be in the root.
You can assign the publicPath as root in output in webpack config file
like
output: {
filename: '[name].js',
publicPath: '/',
},
I followed the instructions for Jekyll Quickstart. Whenever I make changes in my site's directory, the changes get wiped somehow. For example, I modified some of the code in index.html, only to have it return to Jekyll's default. I also created a subdirectory in _site called 'otherservices' with an index.html. That gets wiped as well. Any idea why this may be happening? I can't really use Jekyll if it keeps wiping.
Jekyll is a static website generator, each time it generates a website it place files in the _site folder.
Any changes you make inside the above folder are lost because it is recreated when executing jekyll build or jekyll serve .
Changes should be made to the rest of the files or folders so they will be processed and locate the resulting files inside _site.
You should not write manually into _site directory, that is Jekyll's output.
If you need an otherservices directory in the output, place it one level above, like this:
_site/
otherservices/
index.html
index.md
Jekyll will copy every file and directory into _site, which is not excluded in the configuration and doesn't start with _ prefix. Files that have front-matter will be processed in addition to copying. So in result Jekyll will generate this structure:
_site/
otherservices/ (copies it)
index.html
index.html (generates it from index.md)
otherservices/
index.html
index.md
It is worth reading the documentation on how to create custom pages.
I have a directory setup like this:
node_modules
src
index.js
I'm trying to copy these to a dist folder like this:
node_modules
index.js
I've tried a number of variations, such as
gulp.src(['src/**/*', 'node_modules/**']).pipe(gulp.dest('dist'));
But this places all of the node_modules in the /dist and not within the node_modules directory.
Any idea how I can do this?
You need to tell gulp.src that the base directory for node_modules/** is . so that the node_modules created at the destination. However, you cannot set the base to . for src/**/* because that would mean that the src directory would be created in your destination. So you need in effect to specify two sets of sources. gulp-add-src can help with this.
Something like this should work:
var addsrc = require("gulp-add-src");
gulp.src('src/**/*')
.pipe(addsrc('node_modules/**', { base: '.'})
.pipe(gulp.dest('dist'));
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.