ericalli / static-site-boilerplate Goto Github PK
View Code? Open in Web Editor NEWA better workflow for building modern static websites.
Home Page: http://staticsiteboilerplate.com
License: MIT License
A better workflow for building modern static websites.
Home Page: http://staticsiteboilerplate.com
License: MIT License
Describe the bug
Dev server. Changes to files do not reflect in the browser neither with hot reload nor with manual. Only relaunching server works.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Reflecting changes to the file at least with manual page reload.
Desktop (please complete the following information):
As mentioned in this Twitter thread:
Is there a way to add more JS files?
Would I need to edit a config file to addmore JS files and set the order?
Describe the bug
Production version of bundles contains inlined source maps which makes the bundles huge.
To Reproduce
Steps to reproduce the behavior:
(see 'devtools' setting in webpack.config.js file which always sets the value to 'cheap-eval-source-map')
Expected behavior
Source Maps should not be inlined on production because it creates huge JS files.
According to https://webpack.js.org/configuration/devtool/ for production this value should be one of the production values (do not specific devtool, 'source-map', 'hidden-source-map', and 'nosources-source-map') depending on what exactly you need.
recommendation
Reading the webpack docs, I'm inclined to say that 'hidden-source-map' is a good default option here. so omit a webpack.config.js file that has something like this line:
devtool: config.env === 'development' ? 'cheap-eval-source-map' : 'hidden-source-map',
Describe the bug
Error: pngquant failed to build, make sure that libpng-dev is installed
Tried installing libpng doesn't work. Tried isntalling manually doesn't work. Please let me know how to solve this, to use the Static Bolier Plate
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
Setting maximum-scale in viewport meta has long been considered bad. It prevents users from being able to pinch-zoom should they need to.
To Reproduce
See the outputted html
look at meta tag for viewport:
Expected behavior
Should be:
Desktop (please complete the following information):
Additional context
https://a11yproject.com/posts/never-use-maximum-scale/
To Reproduce
Steps to reproduce the behavior:
npm run start
[email protected] start /Users/eugeveli/Desktop/myProj/wallpapers/wallpapers.site
cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.js
clean-webpack-plugin: /Users/eugeveli/desktop/myproj/wallpapers/wallpapers.site/dist has been removed.
events.js:173
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE: address already in use 127.0.0.1:8000
at Server.setupListenHandle [as _listen2] (net.js:1255:14)
at listenInCluster (net.js:1303:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1442:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
at emitErrorNT (net.js:1282:8)
at process.internalTickCallback (internal/process/next_tick.js:72:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/eugeveli/.npm/_logs/2019-01-11T15_24_44_405Z-debug.log
Desktop
2019-01-11T15_31_24_839Z-debug.log
:
Unable to integrate file-include-webpack-plugin
Been trying to get the following working with SSB but can't seem to.
https://github.com/Vishal0203/file-include-webpack-plugin
Managed to ignore the files in the partials directory I created however the partials dont merge into the html parents. Any ideas or alternatives appreciated!
Describe the bug
The dploy package (https://github.com/lucasmotta/dploy) is currently unmaintained. While it still works, it might be wise to look for an alternative?
Expected behavior
This package should use maintained dependencies wherever possible.
Hi! First of all, thank you for this project, it's really helpful. I just noticed something that could be annoying for some (it has been for me):
When building, images copying into /dist
does not take into account the srcset
attribute in html files, for example:
<img src="src/images/logo.png" srcset="src/images/[email protected] 2x" />
You can still copy these files by hand but it's not ideal when deploying automatically.
Thanks again!
Disclaimer: Its probably my fault, because i'm not super familiar with Webpack and NPM. What i'm looking for is a 'easy' way of using this for a multilingual website, where each language is a different webpage / website , and not rendered on the client using a templating language.
So for example: www.domain.com (for english) and www.domain.com/de for German. Each is a different page.
This package seems to do what i was lookin for:
https://www.npmjs.com/package/static-i18n
But i'm not sure how to integrate it with webpack / build process.
Describe the bug
Images that are placed in the images folder but only referenced in HTML and not CSS do not get included in the production build. So far only tested with a PNG but would bet it includes others as well.
To Reproduce
Expected behavior
Images that are placed in the assets folder should not be removed.
Desktop (please complete the following information):
Any hint how could I import other CSS/JS libraries like Bootstrap?
I installed Vue.js using NPM and load it in scripts.js:
import 'vue';
But it does not work since the scripts get loaded at the bottom of the body, any way to move it to head?
Describe the bug
I have a video in my HTML using a <video>
tag. I have an mp4 file but when I do a production build, it doesn't get translated over.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The video should be loaded in.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
I see that there is an attempt to load the videos over. in the loaders file.
node -v v14.2.0
npm -v6.14.5
node install
node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.9/fse-v1.2.9-node-v83-darwin-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v83 ABI, unknown) (falling back to source compile with node-gyp)
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
In file included from ../fsevents.cc:6:
In file included from ../../nan/nan.h:2884:
../../nan/nan_typedarray_contents.h:34:43: warning: 'GetContents' is deprecated:
Use GetBackingStore. See http://crbug.com/v8/9908.
[-Wdeprecated-declarations]
data = static_cast<char*>(buffer->GetContents().Data()) + byte_offset;
^
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8.h:5202:3: note:
'GetContents' has been explicitly marked deprecated here
V8_DEPRECATE_SOON("Use GetBackingStore. See http://crbug.com/v8/9908.")
^
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8config.h:402:39: note:
expanded from macro 'V8_DEPRECATE_SOON'
^
1 warning generated.
SOLINK_MODULE(target) Release/fse.node
COPY /Users/richardroe/Documents/static-site-boilerplate/node_modules/fsevents/lib/binding/Release/node-v83-darwin-x64/fse.node
TOUCH Release/obj.target/action_after_build.stamp
[email protected] install /Users/richardroe/Documents/static-site-boilerplate/node_modules/sharp
(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
info sharp Using cached /Users/richardroe/.npm/_libvips/libvips-8.7.4-darwin-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=14.2.0 runtime=node arch=x64 libc= platform=darwin)
TOUCH Release/obj.target/libvips-cpp.stamp
CXX(target) Release/obj.target/sharp/src/common.o
CXX(target) Release/obj.target/sharp/src/metadata.o
CXX(target) Release/obj.target/sharp/src/stats.o
../src/stats.cc:130:19: error: no matching member function for call to 'Set'
channels->Set(i, channelStat);
~~~~~~~~~~^~~
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8.h:3639:37: note:
candidate function not viable: requires 3 arguments, but 2 were provided
V8_WARN_UNUSED_RESULT Maybe Set(Local context,
^
/Users/richardroe/Library/Caches/node-gyp/14.2.0/include/node/v8.h:3642:37: note:
candidate function not viable: requires 3 arguments, but 2 were provided
V8_WARN_UNUSED_RESULT Maybe Set(Local context, uint32_t index,
^
1 error generated.
make: *** [Release/obj.target/sharp/src/stats.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: make
failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.4.0
gyp ERR! command "/usr/local/Cellar/node/14.2.0/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/richardroe/Documents/static-site-boilerplate/node_modules/sharp
gyp ERR! node -v v14.2.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/richardroe/.npm/_logs/2020-05-14T23_42_56_422Z-debug.log
Describe the bug
In your documentation, it clearly states:
You may add as many html pages as you’d like to the root level directory, they will automatically be copied and minified into the dist/ folder upon building your site.
So I don't know if this a bug report or a feature request:
I want users to be able to visit website.com/survey
instead of survey.html
so I've put a survey/index.html
file there. It works technically, I see the HTML, but it is not receiving any of the styles or javascript code injection.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect to be able to nest my HTML for cleaner URLs
Desktop (please complete the following information):
Platform Agnostic
Had difficulty publishing as node-sass is now deprecated. Installing sass and modifying config/webpack.loaders.js L76 to:
implementation: require("sass"),
resolved this for me.
Also, wouldn't build when I had an image in the images folder as it threw the following error:
ERROR in ./images/lights.jpg
Module build failed (from ../node_modules/image-webpack-loader/index.js):
Error: spawn /static-site-boilerplate/node_modules/mozjpeg/vendor/cjpeg ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
@ ./index.html (../node_modules/html-webpack-plugin/lib/loader.js!./index.html) 1:241-271
Upgrading to "image-webpack-loader": "^7.0.1", fixed this for me.
Is your feature request related to a problem? Please describe.
If I import big amount of css (e.g. frameworks like Bootstrap etc.), a lot of unused css classes end up in the css prod build.
Describe the solution you'd like
I think that purge-css can fix this.
Describe alternatives you've considered
Maybe some of already used css plugins (like cssnano) can also fix the problem.
node -v 16.5.0
npm -v 8.8.0
Hello, npm install
fails with error:
...
npm ERR! code 1
npm ERR! path C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which
failed Error: not found: python2
npm ERR! gyp verb which
failed at getNotFoundError (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:13:12)
npm ERR! gyp verb which
failed at F (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:68:19)
npm ERR! gyp verb which
failed at E (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:80:29)
npm ERR! gyp verb which
failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:89:16
npm ERR! gyp verb which
failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which
failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which
failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which
failed python2 Error: not found: python2
npm ERR! gyp verb which
failed at getNotFoundError (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:13:12)
npm ERR! gyp verb which
failed at F (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:68:19)
npm ERR! gyp verb which
failed at E (C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:80:29)
npm ERR! gyp verb which
failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\which\which.js:89:16
npm ERR! gyp verb which
failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which
failed at C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which
failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which
failed code: 'ENOENT'
npm ERR! gyp verb which
failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which
succeeded python C:\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:398:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\bdied\Documents\Projekte\boilerplate\static-site-boilerplate\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.15.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
...
Any ideas why?
Is your feature request related to a problem? Please describe.
I need to implement a permanent redirect from path /a in my website to page /b.
Describe the solution you'd like
Can we have some way configure this?
When building the site, 404.html file is generated - which is good, but it is inserted into sitemap.xml - 404.html should not be indexed by search engines.
Reproduce:
just follow the simple instructions to install a fresh project from (https://docs.staticsiteboilerplate.com/getting-started/installation?id=step-1-clone-or-download-the-git-repo),
and npm run start:dist
Expected behavior
404.html should not be in sitemap.xml (nor sitemap.xml.gz)
Hello,
When I run the production server (or when I build for production) I have a strange error:
ERROR in Error: Child compilation failed:
Option `sitemap` should be an absolute URL
I don't get where it comes from, I just added some JS and CSS files in webpack.config.js
in the entry points.
Do you have any idea where it could come from?
Thanks a lot,
EDIT: My bad, it's just that site_url
was empty
Custom fonts do not appear as they are not piped into the build process by Webpack's file-loader
. This is the path I am using in my stylesheets:
@font-face {
font-family: 'Font Name';
src: url('/fonts/font-name.woff2') format('woff2'), url('/src/fonts/font-name.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Font files are not emitted neither on development server npm run start
nor production build npm run build:dist
.
I checked this issue's solution but the result is the same. Has anyone experienced a similar problem?
What about adding html
tags for viewport
and the "IE hacking"?
inside head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
inside body tag:
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
Additional context
there is some tags that maybe be helpfu: https://github.com/h5bp/html5-boilerplate/blob/master/dist/index.html
Going by this project means you just keep making more html files. That works fine if you have maybe two or three, but if you have dozens, that means that if you want to change the <head>
/<footer>
/<nav>
on your website then you have to change it in every single file manually, which is insane.
Any mature static site setup should have a templating/partials/include engine setup.
Is multi-language support in plans for future releases?
Describe the bug
Getting error when running npm start
To Reproduce
Steps to reproduce the behavior:
Errormessage
path.js:39
throw new ERR_INVALID_ARG_TYPE('path', 'string', path);
^
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at assertPath (path.js:39:11)
at Object.join (path.js:432:7)
at Object.<anonymous> (C:\Users\marcus\Desktop\_temp\static-site-boilerplate\config\site.config.js:20:17)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
Versions
On a freshly cloned repo I get an error when running npm install:
[email protected] install...
../src/stats.cc:130:19: error: no matching member function for call to 'Set'
...node-gyp/13.8.0/include/node/v8.h:3547:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
V8_WARN_UNUSED_RESULT Maybe Set(Local context,
I guess sharp package is dependency of webapp-webpack-plugin which is now deprecated (8 months without update)
Describe the bug
Unable to run npm install
on Apple M1
Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8
unable to compile on M1
To Reproduce
Steps to reproduce the behavior:
npm install
Expected behavior
install should run fine
Screenshots
Log "Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8"
sharp, fatal error: 'vips/vips8' file not found
SOLUTION
New Pre-build binaries are available now. But the project or dependencies of it still try to use the old binaries.
npm upgrade
npm install
otherwise:
It would be great to have a Matomo wizard included because I do not use Google Analytics.
Describe the bug
When I run npm run build:dist
, all the favicons URLs inserted into the head of the HTML are prefixed with a /
.
The static site I'm creating is in a directory: example.com/landing
, so the favicons 404 when it looks for the images at example.com/images/favicons/*
, when they are located at example.com/landing/images/favicons/*
.
To Reproduce
Steps to reproduce the behavior:
dist
folder with npm run build:dist
example.com/landing
Expected behavior
I would expect that the URLs for favicons would be generated as images/favicons/*
.
Desktop (please complete the following information):
Additional context
When I ran npm run setup
, I made sure that the URL for the live site included the directory - so either I edit the favicon: path.join(ROOT, '/src/images/favicon.png')
in site.config.js
(seems like a bad idea), or the system needs to generate the favicon URLs without a leading slash.
Webp images are not being copied after building how to fix that ?
Dependancies should be changed to dependencies on this page:
https://docs.staticsiteboilerplate.com/getting-started/installation#step-2-install-dependancies
Describe the bug
When trying to build with 'npm i' I get the following error message:
> node ./config/site.setup.js
/Users/wnas/Documents/workspace/static-site-boilerplate/config/site.setup.js:11
async function runSetup() {
^^^^^^^^
SyntaxError: Unexpected token function
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.runMain (module.js:575:10)
at run (node.js:348:7)
at startup (node.js:140:9)
at node.js:463:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node ./config/site.setup.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/wnas/.npm/_logs/2019-02-12T07_27_48_923Z-debug.log
Additional context
Add any other context about the problem here.
What's wrong?
When I'm running npm run start
after setting up the project with wizard, I'm getting this error:
Error: No configuration provided for /Users/username/Documents/GitHub/repo-name/src/stylesheets/styles.scss at module.exports (/Users/username/Documents/GitHub/repo-name/node_modules/stylelint/lib/utils/configurationError.js:8:28) at searchForConfig.then.then.config (/Users/username/Documents/GitHub/repo-name/node_modules/stylelint/lib/getConfigForFile.js:55:15)
To Reproduce
Steps to reproduce the behavior:
npm install
npm run start
Expected behavior
Error not showing up.
Desktop:
I've tried installing and running it two times already.
Once I've added the Google Analytics Tracking ID in the npm setup and did a npm run build:dist the Analytics script is added between the HEAD and BODY. This is invalid HTML. It should be added inside the HEAD.
Describe the bug
When you build a project, the images directory does not contain images that are in src/images
To Reproduce
Steps to reproduce the behavior:
Desktop (please complete the following information):
Is it possible to use some template engine like Handlebars, Nunjucks or something else?
Describe the bug
In config/webpack.loaders.js
, line 19, the test
regex matches only .jsx
but not .js
files.
x
should be optional with ?
to match both .js
and .jsx
files.
- /\.js(x)$/
+ /\.js(x)?$/
// or something like
+ /\.jsx?$/
+ /\.(js|jsx)$/
(taken from https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L29)
tested with https://www.regextester.com/
To Reproduce
Steps to reproduce the behavior:
$ npm install
$ npm start
config/webpack.loaders.js
, line 23, change loader
from babel-loader
to an invalid loader name, for example: dumbbell-loader
Expected behavior
webpack-dev-server should display an error of the invalid loader, which means the source file scripts.js
get processed.
Screenshots (of the expected behavior)
Desktop (please complete the following information):
Additional context
.js
files are included in the bundle but they are not transpiled with babel-loader
✌️
UPDATE TO COME, SKIP NPM PART FOR NOW
Describe the bug
Script build:dist
fails with error on clean clone (without any modifications) during css parsing. Error was not catched, can't be easily diagnosed by through terminal output.
To Reproduce
Steps to reproduce the behavior:
yarn && yarn build:dist
Expected behavior
Should build without errors.
Screenshots
Yarn (yarn && yarn build:dist
) on a clean clone
Desktop (please complete the following information):
Additional info
After trying with npm only (without the use of yarn), I was able to see that the path to terser
plugin is missing. I also tried installing terser
manually to no avail. Below is a screenshot that should give pointers:
I try to add some SCSS, nothing special.
But get all kinds of errors:
ERROR in src/stylesheets/styles.scss
1:2 × Expected newline after "," selector-list-comma-newline-after
2:6 × Expected indentation of 2 spaces indentation
1:12 × Expected newline after "," selector-list-comma-newline-after
4:1 × Expected empty line before rule rule-empty-line-before
8:3 × Expected empty line before comment comment-empty-line-before
26:1 × Expected empty line before rule rule-empty-line-before
How can I disable this strict parsing?
ERROR in ./stylesheets/styles.scss Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js): Error: Option
sitemap` should be an absolute URL
at resolve (D:\MangroveProjects\recover-better\node_modules\generate-robotstxt\dist\standalone.js:147:15)
at new Promise ()
at Promise.resolve.then.then (D:\MangroveProjects\recover-better\node_modules\generate-robotstxt\dist\standalone.js:110:18)
at
@ multi ./javascripts/scripts.js ./stylesheets/styles.scss main[1]
ERROR in Option sitemap
should be an absolute URL`
If nothing is input on the interactive set up then there has to be something there so that it doesn't error out.
Describe the bug
The scripts.js file is not automatically importing jQuery. I believe there is a part in your code in site.setup.js that attempts to this. The error I get is:
Uncaught ReferenceError: $ is not defined
When I manually import * as $ from 'jquery'
at the top of my scripts.js file jQuery works.
Also, I have to manually @import '~sanitize.css' in my styles.scss file for it to be applied. Your site.setup.js file should also take care of this so I think these functions aren't being run?
Additionally, when I manually import these it appears the SCSS file is loaded in after the JS as for a brief moment when refreshing the page no styling is applied. When it does apply, CSS transitions that shouldn't occur on page load also occur.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Expect CSS to display before JS waits for document to be ready.
Expect jQuery and sanitize.css to automatically be imported into their respective scripts.js and styles.css file at build time.
Desktop (please complete the following information):
Question
How to change the compression ratio of the images?
Describe the bug
On https://docs.staticsiteboilerplate.com/ it says is insecure because of expired SSL cert.
Is your feature request related to a problem? Please describe.
Add TailwindCSS V2 for styling.
Describe the solution you'd like
I simply want to style my HTML using https://tailwindcss.com/docs
Describe alternatives you've considered
No, in my workflow, using TailwindCSS is a must.
Additional context
Nothing to add. I think TailwindCSS is making a name for itself at this point.
I never worked with scss so I don't know if that can be in conflict.
Thanks for considering :)
Describe the bug
When i change pug/html , images it is okay when browser fully autoreload , but when i update sass, / css files i need only reload styles , but dont reload browser at all.
To Reproduce
Expected behavior
Browser not reloading, it is only reload styles. (thats much more quickly)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.