Gatsby cookiecutter template by beamalsky · Pull Request #85 · datamade/how-to

beamalsky · 2020-06-18T21:49:31Z

Overview

This PR adds a cookiecutter template for a DataMade-style Gatsby app to docker/templates. It's based on gatsby-starter-default but includes Bootstrap setup, a Github Action for linting, and is containerized.

@jeancochrane or @hancush, I'd love to hear your thoughts on the containerization here. When I'm developing a Gatsby project and add or delete a dependency, I have to stop and rebuild the container. Is there a way I can modify my Dockerfile here so that it live updates node_modules?

Testing

Follow the instructions in the README here to set up a new Gatsby app
Follow the 🚀 Quick start guide in your new directory's README to run the site

… gatsby-cookiecutter

hancush

Thanks for this, @beamalsky!

I'm getting an error when I try to build the cookiecutter:

call-me-hank:templates hannah$ docker-compose run --rm cookiecutter -f new-gatsby-app
app_name [my-new-gatsby-app]:
app_verbose_name [My New Gatsby App's Title]:
description [A longer description of my new app]:
Traceback (most recent call last):
  File "/usr/local/bin/cookiecutter", line 10, in <module>
    sys.exit(main())
  File "/usr/local/lib/python3.7/site-packages/click/core.py", line 764, in __call__
    return self.main(*args, **kwargs)
  File "/usr/local/lib/python3.7/site-packages/click/core.py", line 717, in main
    rv = self.invoke(ctx)
  File "/usr/local/lib/python3.7/site-packages/click/core.py", line 956, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/local/lib/python3.7/site-packages/click/core.py", line 555, in invoke
    return callback(*args, **kwargs)
  File "/usr/local/lib/python3.7/site-packages/cookiecutter/cli.py", line 120, in main
    password=os.environ.get('COOKIECUTTER_REPO_PASSWORD')
  File "/usr/local/lib/python3.7/site-packages/cookiecutter/main.py", line 94, in cookiecutter
    output_dir=output_dir
  File "/usr/local/lib/python3.7/site-packages/cookiecutter/generate.py", line 364, in generate_files
    generate_file(project_dir, infile, context, env)
  File "/usr/local/lib/python3.7/site-packages/cookiecutter/generate.py", line 166, in generate_file
    tmpl = env.get_template(infile_fwd_slashes)
  File "/usr/local/lib/python3.7/site-packages/jinja2/environment.py", line 830, in get_template
    return self._load_template(name, self.make_globals(globals))
  File "/usr/local/lib/python3.7/site-packages/jinja2/environment.py", line 804, in _load_template
    template = self.loader.load(self, name, globals)
  File "/usr/local/lib/python3.7/site-packages/jinja2/loaders.py", line 125, in load
    code = environment.compile(source, name, filename)
  File "/usr/local/lib/python3.7/site-packages/jinja2/environment.py", line 591, in compile
    self.handle_exception(exc_info, source_hint=source_hint)
  File "/usr/local/lib/python3.7/site-packages/jinja2/environment.py", line 780, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/usr/local/lib/python3.7/site-packages/jinja2/_compat.py", line 37, in reraise
    raise value.with_traceback(tb)
  File "./src/components/layout.js", line 32, in template
  File "/usr/local/lib/python3.7/site-packages/jinja2/environment.py", line 497, in _parse
    return Parser(self, source, name, encode_filename(filename)).parse()
  File "/usr/local/lib/python3.7/site-packages/jinja2/parser.py", line 901, in parse
    result = nodes.Template(self.subparse(), lineno=1)
  File "/usr/local/lib/python3.7/site-packages/jinja2/parser.py", line 876, in subparse
    self.stream.expect('variable_end')
  File "/usr/local/lib/python3.7/site-packages/jinja2/lexer.py", line 384, in expect
    self.name, self.filename)
jinja2.exceptions.TemplateSyntaxError: expected token 'end of print statement', got ':'
  File "./src/components/layout.js", line 32
    margin: `0 auto`,

Re: dependencies, how are you installing them? I had a slightly different mount in Stormwater, but I think the important thing is that it matches the work dir, which yours does.

This is what I run: docker-compose run --rm app add ${PACKAGE}

hancush · 2020-08-21T19:33:17Z

+ENTRYPOINT [ "yarn" ]
+CMD [ "start" ]
+
+ENTRYPOINT [ "gatsby" ]


Docker only recognizes the last entrypoint in the Dockerfile, so the first entrypoint is not being run. What's your intention with your entry points and commands?

It's the gatsby build! Thanks for the catch

hancush · 2020-08-21T19:34:30Z

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 gatsbyjs


Suggested change

Copyright (c) 2015 gatsbyjs

Copyright (c) 2020 DataMade

hancush · 2020-08-21T19:35:12Z

+
+- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
+
+### 💫 TK: Deploy


Could we link to our documentation here?

Yeah! Do you mean our deployment documentation specifically?

Nevermind I see! Adding.

hancush · 2020-08-21T19:45:12Z

+
+3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
+
+4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.


Do we use this?

We don't, in favor of ESLint. Good catch again ty!

beamalsky · 2020-09-10T20:27:07Z

Thanks @hancush! I've added edits based on your comments. After a little investigative work I believe that the Jinja error you noted above was caused by the double brackets of JSX syntax, eg:

  <header
    style={{
      background: `#e49fb2`,
      marginBottom: `1.45rem`,
    }}
  />

An unfortunate collision, but I've gotten around it by adding a line in cookiecutter.json to avoid rendering the culprit files, as this comment recommends: https://stackoverflow.com/a/39151217

hancush

It works! Overall, this looks great to me. I have one outstanding question about style preferences, and then I think this is good to go. Really great idea to start from Gatsby's own template. 🚀

hancush · 2020-09-24T18:11:21Z

+const Header = ({ siteTitle }) => (
+  <header
+    style={{
+      background: `#e49fb2`,


Love this choice. :-)

hancush · 2020-09-24T18:12:34Z

+
+const Header = ({ siteTitle }) => (
+  <header
+    style={{


Style question: We tend to avoid inline styles when writing HTML. What's our stance on inline styling for components?

Great question, and one that I'd like to have a stronger stance on! (I suspect going through the course at https://mastergatsby.com/ would supply it)

This section of the Gatsby tutorial gives a good account of the different CSS approaches: global styles, component-scoped styles, and CSS-in-JS (aka inline styles).

I've used all 3 at different times, and the approach that I've liked most has been to have a global style sheet (which this repo doesn't include, but maybe should—here it is on the courts app) and to handle the component-level styling with CSS-in-JSS. The Gatsby docs also recommend using CSS modules, but I've found it cumbersome to have to create a second CSS file to update alongside every component.

I've also used the styled-components package for CSS-in-JS, and I'd originally included it in this template, but I haven't always actually found it necessary. In courts, David started his components with it and I've ended up writing it out.

This is a good overview of the benefits of CSS-in-JSS: https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660

I'm inclined to add a global style sheet to this repo for now, and plan to come back to this question later and flesh out official guidance on DataMade's React CSS practices if I go through that Mastering Gatsby class. I agree that avoiding inline CSS styles in Django projects is still a best practice. What do you think?

That's a good plan! I agree it'd be nice to have an example of global styles in the template.

hancush · 2020-09-24T18:15:16Z

@@ -0,0 +1,16 @@
+module.exports = {


Nice! We should deprecate this guidance after we bring this in.

Good point!

It'd be nice to bring this testing-guidelines repo into how-to... what do you think about the sequencing of tasks here?

We decided to leave the external repos (data-analysis-guidelines, data-making-guidelines, testing-guidelines, deploy-a-site before it was deprecated) separate, to preserve any external links to them. (data-making-guidelines, in particular, has a life of its own.) I think that, after this comes in, we should deprecate the JavaScript testing portion of testing guidelines, since it was never really adopted anyway, but leave everything else over there for now.

Sounds good. I can set up a PR with that deletion.

beamalsky · 2020-09-24T21:20:00Z

@hancush I've set this up with a global styles sheet! Let me know if this looks good to merge. I'll open a PR now in testing guidelines

Bea Malsky added 4 commits June 18, 2020 16:48

Start of a Gatsby cookiecutter

8659be4

Add test action to run linter on each commit

e99d1a2

Add better SEO defaults

6de05e5

Delete pesky DS_STORE files

0062060

beamalsky changed the title ~~Start of a Gatsby cookiecutter~~ Gatsby cookiecutter template Jun 18, 2020

Bea Malsky and others added 6 commits July 20, 2020 15:12

Move cookiecutter to containerization dir

212f24a

Merge branch 'master' into gatsby-cookiecutter

75020bc

Rename new-gatsby-app

7bbfbd6

Merge branch 'gatsby-cookiecutter' of github.com:datamade/how-to into…

8a6aefe

… gatsby-cookiecutter

Adjust cookiecutter json

adc2d14

Update lockfile

4ab4f92

beamalsky requested review from hancush and jeancochrane and removed request for hancush August 13, 2020 22:58

hancush requested changes Aug 21, 2020

View reviewed changes

Bea Malsky added 2 commits September 10, 2020 15:14

Hannah's edits

7728834

Copy src jsx without render

43669a4

beamalsky requested a review from hancush September 10, 2020 20:27

hancush reviewed Sep 24, 2020

View reviewed changes

Set up global styles file

e58753f

beamalsky mentioned this pull request Sep 24, 2020

Update JS testing with ESLint datamade/testing-guidelines#32

Open

hancush approved these changes Sep 25, 2020

View reviewed changes

beamalsky merged commit 813925f into master Sep 28, 2020

beamalsky deleted the gatsby-cookiecutter branch September 28, 2020 14:18

		@@ -0,0 +1,22 @@
		The MIT License (MIT)

		Copyright (c) 2015 gatsbyjs


		- To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/). In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.

		### 💫 TK: Deploy


		3. `.gitignore`: This file tells git which files it should not track / not maintain a version history for.

		4. `.prettierrc`: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.

Conversation

beamalsky commented Jun 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Testing

Uh oh!

hancush left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

beamalsky commented Sep 10, 2020

Uh oh!

hancush left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

beamalsky Sep 24, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

beamalsky commented Sep 24, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

beamalsky commented Jun 18, 2020 •

edited

Loading

beamalsky Sep 24, 2020 •

edited

Loading