Bye bye Foundation & Browserify, hello Webpack & PostCSS #77

thomasdegry · 2017-03-13T14:25:59Z

Idea

There are a couple of things playing here but this PR has some objectives:

Kill Foundation and its dependency on old jQuery versions
Introduce Webpack 2.x and get rid of Browserify
Reduce CSS weight #75

Todo (feel free to add or suggest)

Fix linting when running npm run lint
Update all the dependencies in package.json and get rid of unused ones >> more or less done; just unsure if we still need/want eslint-config-airbnb, eslint-plugin-react, stylelint-config-standard and stylelint-selector-bem-pattern
Figure out whether we need/can differentiate between dev dependencies and normal dependencies
Provide generic configuration for use in templates and JS, see SurviveJS webpack environment variables for example
Update the README.md file to represent the new boilerplate

~~Have a small CSS boilerplate that has a normalize and some basic settings~~ WONTFIX, suitcss comes with this by default, see https://github.com/suitcss/suit/blob/master/index.css#L1 -> https://github.com/suitcss/base/blob/master/index.css#L1

thomasdegry · 2017-03-14T14:02:59Z

Interesting fact, because we have a gulpfile.babel.js that is written in EcmaScript it's not easy to update the preset we are currently using from es2015 to es2016 or es2017. Right now we have both es2015 going just to power Gulp and es2017 that is used by webpack to bundle our JS.

Not sure how I feel about having two presets installed but at the other hand it does decouple our build process from the code transpiler so that's good... 🤔

gulp-suitcss

akrawchyk · 2017-03-20T16:56:55Z

Update all the dependencies in package.json and get rid of unused ones >> more or less done

@thomasdegry let's move the linting modules to devDependencies and add a lint script to npm.

We can potentially remove the stylelint packages since suitcss lints by default... but that happens during the gulp build. Not sure what to do about integrating that into the lint script. We might want to adjust this configuration though, so .stylelintrc will probably need to hang around.

- Removed `.stylelintrc` file and moved everything to a `stylelint.config.js` file so we can consume it for both `npm run lint` as well as our build process - Added some custom media queries to our `app.css` to make our linter pass without warnings - Moved all linting stuff to devDependencies and removed some older dependencies for bem support

thomasdegry · 2017-03-21T14:30:51Z

@akrawchyk check out the changes in the last commit; that should take care of a lot of these things!

…d yarn.lock

akrawchyk · 2017-04-20T17:18:21Z

{{cookiecutter.repo_name}}/circle.yml

+    NODE_ENV: production
+dependencies:
+  override:
+    - npm install --dev


@thomasdegry can we use yarn here instead? https://circleci.com/docs/1.0/yarn/

Also, can you try integrating an example application with circle before we merge this?

akrawchyk · 2017-04-20T17:19:48Z

@thomasdegry great work, this is looking complete. Along with my comment at #77 (comment) can we also try deploying an example project to Heroku static?

Circle
Heroku

thomasdegry · 2017-04-20T17:26:57Z

Good ideas! Will get that done tomorrow!

thomasdegry · 2017-04-21T09:22:25Z

@akrawchyk Heroku deploy went smooth. Had to move stylelint and stylelint-config-suitcss to dependencies vs. devDependencies to make it build though.

As for circle, I tried using yarn instead of npm to install the dependencies but ran into this issue with this package failing:

An unexpected error occurred: "https://github.com/pocketjoso/css.git: invalid tar file"

So for now I switched circleci back to npm and the ~~tests~~ linters pass now!

baconjulie · 2017-04-26T17:43:52Z

{{cookiecutter.repo_name}}/README.md

-To add more, uncomment the appropriate includes from the `app.scss` file along
-with the appropriate settings section for the component in the `_.settings.scss`
-file. This is described in detail at [Foundation's Sass docs](http://foundation.zurb.com/sites/docs/sass.html#adjusting-css-output).
+As for the JS you need to explicitely indicate which values you want passed to your code via webpack to prevent passing any sensitive data. You can do so by modifying the `webpack.config.js` file, we use the `DefinePlugin` to make our environment variables available in our code. This means you can use `process.env.SECRET_MESSAGE` in your Javascript files and the appropriate environment variable will be substituted during the build process to be shipped in the browser.


explicitely --> explicitly

Haha good catch; thank you!

baconjulie · 2017-04-26T18:00:41Z

{{cookiecutter.repo_name}}/package.json

-      "babelify"{% if cookiecutter.use_foundation_sites == 'y' -%},
-      "browserify-shim"{%- endif %}
-    ]
+    "browser-sync": "^2.18.8",


Should we be using carats in front of the dependencies as it could put us at risk of drifting to different versions/breaking things? https://devcenter.heroku.com/articles/node-best-practices

aha! We have a yarn.lock file to avoid different versions being installed on different projects. When you do the initial project cookiecutter everything should start in the same place every time. If the devs choose to upgrade packages after that, they can.

marissa-halpert · 2017-04-26T18:11:24Z

{{cookiecutter.repo_name}}/README.md


-```
-npm run dev
+``` npm run dev


Need a newline between ``` and npm run dev

Good catch! Thanks

marissa-halpert · 2017-04-26T18:37:44Z

{{cookiecutter.repo_name}}/src/static/css/_help.css

+    }
+
+    @media(--sm-only-viewport) {
+        color: red;


Can we use the hex code instead?

marissa-halpert · 2017-04-26T18:38:52Z

{{cookiecutter.repo_name}}/src/static/css/components/Foo.css

@@ -0,0 +1,3 @@
+.Foo {
+    background-color: red;


Hex code here too!

done in both places

baconjulie · 2017-04-26T18:40:04Z

{{cookiecutter.repo_name}}/src/templates/help/grid.html

+        <div class="Grid Grid--fit">
+            <div class="Grid-cell">
+                <header>
+                    <h1 style="margin: 2rem 0 1rem;">The Grid</h1>


Is there a reason we are using inline styles here?

@j-baconator yes; this css needs to live somewhere for documentation purpose so either I "pollute" the main css file; or I create another css file but this html gets deleted on npm build. So this is just to make the grid docs look better

marissa-halpert · 2017-04-26T18:40:31Z

{{cookiecutter.repo_name}}/src/static/js/app.js

 dateDisplayEl.innerHTML = new Date()
 document.body.appendChild(dateDisplayEl)
+
+console.log(SECRET_MESSAGE)


Shhh don't show the secret message!

marissa-halpert · 2017-04-26T18:44:22Z

{{cookiecutter.repo_name}}/src/static/css/app.css

+    --font-size: 1rem;
+
+    --primary-color: #43d8f8;
+    --secondary-color: red;


red here too!

removed sass; added webpack and postcss

dc4ed39

thomasdegry changed the title ~~Our new front end foundation by killing Foundation~~ Bye bye Foundation & Browserify, hello Webpack & PostCSS Mar 13, 2017

thomasdegry added 9 commits March 13, 2017 15:54

Add postcss-css to deps

dce394a

removed watchify

c2d5535

Remove cookiecutter question on generation

8984424

Fixed some gulp issues

7d487a6

removed default open because it drives me INSANE

a18809e

Fix npm run lint to lint css instead of scss

9866025

Updated dependencies

db863af

Updated to es2017 and explicitely use it in webpack config

237ecc6

Fixed some missing deps

7d1e263

thomasdegry and others added 5 commits March 14, 2017 15:03

Remove rest plugin since it's built into es2017

b6bc623

Trying to add suitcss

e26c42c

Add suitcss dep

06d5d25

remove all references to use_foundation_sites

e159b5f

gulp-suitcss

a3bdb4b

akrawchyk mentioned this pull request Mar 20, 2017

Replace browserify with webpack #71

Closed

Merge pull request #78 from istrategylabs/ak-fix

f809f71

gulp-suitcss

thomasdegry and others added 4 commits March 21, 2017 17:05

Added basic circle.yml file for linting

34f2b12

Dev install on circle

d44dc2e

fix path to css file

314c9a7

prefer standard to eslint, remove unused config, upgrade packages, ad…

2eeb568

…d yarn.lock

akrawchyk force-pushed the postcss-webpack branch from 3b61f9d to 2eeb568 Compare April 11, 2017 23:15

akrawchyk added enhancement in progress labels Apr 11, 2017

akrawchyk self-assigned this Apr 11, 2017

akrawchyk reviewed Apr 20, 2017

View reviewed changes

thomasdegry added 4 commits April 21, 2017 10:41

Yarn in circle.yml file

3f1c539

Made code 0.9rem instead of 9rem lol

7c8ace9

Added buildpack urls to readme for convenience

4e57981

Fix circleci

9e4368b

thomasdegry added 3 commits April 21, 2017 12:51

Nesting was broken

a179db2

Updated cookiecutter readme

6c5d001

Uglify by default and generate sourcemaps

a0a06a9

thomasdegry removed the in progress label Apr 26, 2017

akrawchyk mentioned this pull request Apr 26, 2017

Possible nconf bug #62

Closed

thomasdegry added the ready label Apr 26, 2017

baconjulie reviewed Apr 26, 2017

View reviewed changes

Spelling error in readme fix

a9c6912

baconjulie reviewed Apr 26, 2017

View reviewed changes

marissa-halpert reviewed Apr 26, 2017

View reviewed changes

baconjulie reviewed Apr 26, 2017

View reviewed changes

marissa-halpert reviewed Apr 26, 2017

View reviewed changes

thomasdegry added 2 commits April 26, 2017 20:42

Hex codes

7185eb4

Added new line to readme

f167e81

marissa-halpert reviewed Apr 26, 2017

View reviewed changes

thomasdegry and others added 3 commits April 26, 2017 20:44

Another red -> hex red

309acd6

Readme update re. convict and heroku

cfd1321

fix cookiecutter var

7178d4f

thomasdegry merged commit 922e180 into master Apr 27, 2017

thomasdegry deleted the postcss-webpack branch April 27, 2017 16:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bye bye Foundation & Browserify, hello Webpack & PostCSS #77

Bye bye Foundation & Browserify, hello Webpack & PostCSS #77

thomasdegry commented Mar 13, 2017 •

edited by akrawchyk

thomasdegry commented Mar 14, 2017 •

edited

akrawchyk commented Mar 20, 2017

thomasdegry commented Mar 21, 2017

akrawchyk Apr 20, 2017

akrawchyk commented Apr 20, 2017 •

edited by thomasdegry

thomasdegry commented Apr 20, 2017

thomasdegry commented Apr 21, 2017 •

edited by akrawchyk

baconjulie Apr 26, 2017

thomasdegry Apr 26, 2017

baconjulie Apr 26, 2017

akrawchyk Apr 26, 2017

baconjulie Apr 26, 2017

marissa-halpert Apr 26, 2017

thomasdegry Apr 26, 2017

marissa-halpert Apr 26, 2017

marissa-halpert Apr 26, 2017

thomasdegry Apr 26, 2017

baconjulie Apr 26, 2017

thomasdegry Apr 26, 2017

marissa-halpert Apr 26, 2017

akrawchyk Apr 26, 2017

marissa-halpert Apr 26, 2017

Bye bye Foundation & Browserify, hello Webpack & PostCSS #77

Bye bye Foundation & Browserify, hello Webpack & PostCSS #77

Conversation

thomasdegry commented Mar 13, 2017 • edited by akrawchyk

Idea

Todo (feel free to add or suggest)

thomasdegry commented Mar 14, 2017 • edited

akrawchyk commented Mar 20, 2017

thomasdegry commented Mar 21, 2017

Choose a reason for hiding this comment

akrawchyk commented Apr 20, 2017 • edited by thomasdegry

thomasdegry commented Apr 20, 2017

thomasdegry commented Apr 21, 2017 • edited by akrawchyk

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thomasdegry commented Mar 13, 2017 •

edited by akrawchyk

thomasdegry commented Mar 14, 2017 •

edited

akrawchyk commented Apr 20, 2017 •

edited by thomasdegry

thomasdegry commented Apr 21, 2017 •

edited by akrawchyk