mirabeau-nl / frontend-boilerplate Goto Github PK

Hi,

I've cloned frontend bootstrap and am trying to run npm install. Which is unsuccessful, I added a log below. Can you point me to a solution?

This is the same on windows and on mac.

npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)
npm ERR! Error: ENOENT, lstat '/Users/christiaanstegeman/Documents/frontend-bootstrap/node_modules/browser-sync/node_modules/eazy-logger/node_modules/opt-merger/node_modules/lodash/lodash.js'
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR! http://github.com/npm/npm/issues
npm ERR! System Darwin 14.3.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/christiaanstegeman/Documents/frontend-bootstrap
npm ERR! node -v v0.10.28
npm ERR! npm -v 1.4.9
npm ERR! path /Users/christiaanstegeman/Documents/frontend-bootstrap/node_modules/browser-sync/node_modules/eazy-logger/node_modules/opt-merger/node_modules/lodash/lodash.js
npm ERR! fstream_path /Users/christiaanstegeman/Documents/frontend-bootstrap/node_modules/browser-sync/node_modules/eazy-logger/node_modules/opt-merger/node_modules/lodash/lodash.js
npm ERR! fstream_type File
npm ERR! fstream_class FileWriter
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/fstream/lib/writer.js:284:26
npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)
npm ERR! Error: ENOENT, lstat '/Users/christiaanstegeman/Documents/frontend-bootstrap/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-parser/bg.gif'
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR! http://github.com/npm/npm/issues
npm ERR! System Darwin 14.3.0
npm ERR! command "node" "/usr/local/bin/npm" "install"
npm ERR! cwd /Users/christiaanstegeman/Documents/frontend-bootstrap
npm ERR! node -v v0.10.28
npm ERR! npm -v 1.4.9
npm ERR! path /Users/christiaanstegeman/Documents/frontend-bootstrap/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-parser/bg.gif
npm ERR! fstream_path /Users/christiaanstegeman/Documents/frontend-bootstrap/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-parser/bg.gif
npm ERR! fstream_type File
npm ERR! fstream_class FileWriter
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/fstream/lib/writer.js:284:26
npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)

[email protected] install /Users/christiaanstegeman/Documents/frontend-bootstrap/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws
(node-gyp rebuild 2> builderror.log) || (exit 0)

If you upload the static files generated with gulp dist to any folder other than the website's root, for example http://example.com/test, the statics are not found because the urls are not relative. This problem can be reproduced when using gulp upload using the default upload config.

Javascript changes sometimes trigger watchify multiple times, depending on which bundle the changes happen in:

• Changes in the first bundle trigger watchify once
• Changes in the second bundle trigger watchify twice
• Changes in the third bundle trigger watchify three times
• And so on...

Which bundle triggers how many changes seems to depend on the order in which glob in the following code (tasks/js.js) returns the bundles:

gulp.task('js-browserify', done => {
  glob(config.js.src.bundles, (err, files) => {
    if (err) done(err)

    const tasks = files
      .map(bundleFile)
      .map(bundler => new Promise(resolve => bundler.on('end', resolve)))

    Promise.all(tasks).then(done)
  })
})

Change the way how the git hooks are copied to the correct hooks folder. In the current situation the .git folder is expected to be in the same root as the bootstrap itself. There are lots of projects where the bootstrap isn't placed in the root of the repo but sits in it's own folder besides for instance a backend folder. For these situations we currently have to change the git path in the config and we need to change the paths within the hooks itself by hand.

This should be an automated process where for instance the install script will search for the closest .git folder and changes the paths on the fly or change them based on the config.

Every now and then I notice in projects commits like feature/feature-name: feature/feature-name: commit message. This happens when git commit --amend is used, but maybe with other git commands as well. Usually I edit my commit message manually. When using a GUI, the person who commits doesn’t notice this behaviour.

Can we rewrite the githook task by checking whether the branch name is already added? I just did a quick search online, maybe https://medium.com/@nicklee1/prepending-your-git-commit-messages-with-user-story-ids-3bfea00eab5a is the solution I’m looking for.

Also test it with io.js.

Highlight.js script can't be found. This causes the code snippets in the doc's component pages not to be highlighted.

During research I noticed that a lot of repo's contain a .gitattributes file.
This has something to do with line endings of files. Do we need this in our project?

https://help.github.com/articles/dealing-with-line-endings/

Add the engines config to the package.json so if someone want to install this the user knows which version of node he needs.
https://docs.npmjs.com/files/package.json#engines

"engines": { "node": ">=8" },

Issue

There is an issue with stylelint-scss that causes a fatal error: "JavaScript heap out of memory".
Similar to this issue.

Fix

Update stylelint-scss to v3.4.4.

Hi,

do you guys have a webpack/rollup version of this boilerplate laying around somewhere?
I think this setup with browserify got a bit outdated and now I've been working with it quite a while, compiling time is terrible due to missing HMR, and its so slow on bigger websites and it lacks of good tree shaking (even with extra browserify plugins).

The most lovely part of this template is the documentation generation, thats the only thing that actually keeps me here.
Was hoping you guys might have something ready in your pocket :)

Is your feature request related to a problem? Please describe.
At the moment when you fork or clone this repository, you have the entire commit history and all potential branches. This requires some cleanup if you want to have a fresh Git history.

Describe the solution you'd like
GitHub introduced template repositories. This specifically build for boilerplate repositories and makes it a breeze to start a new project based on one. You can read more on it here:

• https://www.davebitter.com/quick-bits/github-template-repositories
• https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template

An example of a template repository can be found here:

• https://github.com/DaveBitter/next-boilerplate

Describe alternatives you've considered
Alternatively, you could still work with forks and change things yourself. As GitHub released this feature I think we should use it. It is an enhancement, not a replacement for the old way.

Additional context
x

Schema.com/data structured markup is a way to help the search engines better index and understand the context of the website. This then gives a better experience in the search engine, voice search or maps e.g.
For more information see https://developers.google.com/structured-data/

Therefore I would like to add data structured markup code to the Bootstrap.

Logo:
https://developers.google.com/structured-data/customize/logos

Social profile:
https://developers.google.com/structured-data/customize/social-profiles
Please note: "We encourage you to specify other social profiles as well, but they aren't currently included in Google search results."

Contact info:
https://developers.google.com/structured-data/customize/contact-points

Site Name:
https://developers.google.com/structured-data/site-name

Although the data/link is variable per project, I still think it is a good thing to have the code by default. "Forcing" developers to set the correct data/links and give the search engine/user the best experience.
Question: Maybe there is a way to force to fill/remove the data when using the bootstrap?

I would suggest putting all of the above code/options (site name, contact info, social rule etc) in the ld+json format in the . Then include this data-structured-markup file using the templating language.

What do you guys think?

The build process of NJK crashes if the component name is the same as the template name while using the component plugin.

Steps to reproduce:

1. create a example template in templates/example/example.njk
2. create a example component in components/example/example.njk
3. load the example component in the example template file using the component plugin.

Currently, the build process shows errors. This is with a fresh clone and install.

errorify: Error: Cannot find module 'core-js/es6/promise' from '/Users/dbitter/Documents/code/frontend-boilerplate/src/static/js'
errorify: Error: Cannot find module 'core-js/es6/symbol' from '/Users/dbitter/Documents/code/frontend-boilerplate/src/static/js'
errorify: Error: Cannot find module 'core-js/fn/dom-collections/iterator' from '/Users/dbitter/Documents/code/frontend-boilerplate/src/static/js'
errorify: Error: Cannot find module 'core-js/fn/array/from' from '/Users/dbitter/Documents/code/frontend-boilerplate/src/static/js'
errorify: Error: Cannot find module 'core-js/fn/object/assign' from '/Users/dbitter/Documents/code/frontend-boilerplate/src/static/js'

Installing core-js manually, yarn add core-js doesn't resolve the error. I suspect that the package got updated and the paths are changed.

In the bootstrap there is no reference/mentioning of the gulp task css-sassdoc.
A missed chance, because it does add's value to the bootstrap.
"A Documentation system to build pretty and powerful docs in the blink of an eye"

On the one hand I think it should be included in the the gulp task css-watch.
But on the other hand sassdoc is not a task/tool/requirement for every developer.

So my suggestion is mentioning the gulp task css-sassdoc in the readme.md.

What do you guys think?

When added/supprted, add the auto fix flag to the eslint task.
adametry/gulp-eslint#99

The --fix command line option tells ESLint to attempt to automatically fix as many problems as possible. Fixes are only applied when it is safe to do so, and you’ll see any problems that were left unfixed. So now instead of going back into your files to insert a missing semicolon or properly indent some code, ESLint can do it for you.

When having invalid yml I get a RangeError: Maximum call stack size exceeded

Example of this invalid yml file:

title: testing
description: description details
demo: | {}
implementation: implementation details

I propose to add static json to the bootstrap to be able to mock async json fetching. I use it in almost every project and find myself implementing this every time I start with the bootstrap.

Read more: http://babeljs.io/blog/2015/03/31/5.0.0/

• Update dependency in package.json
• Add .babelrc

Update the mustard cut

https://sixtwothree.org/posts/cutting-the-mustard-revisited

With large projects we tend to structure our templates into folders. Wouldn’t it be great to show that structure in the template list as well? Showing folder structure inside the <ol> will improve readability for users, especially for those who we deliver our documentation to.

Current output:

1. Index
2. Product detail page / product detail page
3. Product detail page / product detail page happy flow
4. Product detail page / product detail page happy flow confirmed
5. Product detail page / product detail page incorrect quantity
6. Product detail page / product detail page no image
7. Product detail page / product detail page out of stock
8. Search page / empty
9. Search page / not found
10. Search page / product

Proposed output:

1. Index
2. Product detail page
   1. product detail page
   2. product detail page happy flow
   3. product detail page happy flow confirmed
   4. product detail page incorrect quantity
   5. product detail page no image
   6. product detail page out of stock
3. Search page
   1. empty
   2. not found
   3. product

Create gulp task which watches and copies a mock and/or media folder.

Sassdoc isn't used by anyone so let's remove it.

Describe the bug
The gulp dev command throws an error and will not run when you do a fresh install of the boilerplate and continue to install the node_modules with yarn install.

The error being thrown:
yarn run v1.13.0
$ gulp dev
[18:22:22] Failed to load external module @babel/register
[18:22:22] Failed to load external module babel-register
[18:22:22] Failed to load external module babel-core/register
[18:22:22] Failed to load external module babel/register
[18:22:22] Local gulp not found in ~/Downloads/foo
[18:22:22] Try running: npm install gulp
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I was able to fix the issue by installing the node_modules with npm install, but it should support Yarn in my opinion.

To Reproduce
Steps to reproduce the behaviour:

1. Do a fresh clone of the boilerplate
2. Run yarn install
3. Run yarn dev
4. Error throws. Now run npm install followed by yarn dev and it will work.

Expected behaviour
It should not throw an error if you installed the node_modules with Yarn.

Screenshots
Not applicable

Desktop (please complete the following information):

• OS: macOS
• 10.14.2 (18C54)