Add browserify-css and some CSS in Django documentation; tiny cookiecutter fixes

[smcalilly]

Overview

This PR:

• Closes #236
  • Adds the browserify-css library to work with our asset pipeline
  • Includes documentation about organizing CSS

Includes:

• Fix to the docker-compose.yml that prevented the cookiecutter from creating a django app
• Fix to the run_tests.sh script so the cookiecutter creates a test command with the app name

Background

I found that third-party CSS isn't compiled whenever the CSS is imported from node_modules, because our pipeline is configured to only import javascript files from node_modules. One example for this bug is react-leaflet or rc-slider — using these libraries in React code requires you to import a CSS file into the React code. This importing breaks with our current pipepline. See the steps to reproduce in #236 if you want to reproduce this.

Notes

I added the browserify-css library as a devDependency in package.json. This is the only way I could get this to work within the cookiecutter. I tried adding it as a regular dependency to the cookiecutter, but the library wouldn't download whenever the docker image built after creating the app via cookiecutter. I have no idea why — this was quite frustrating to debug. Perhaps this is because the library documentation says to npm install --save-dev browserify-css?

Packaging this as a "devDependency" seems like it wouldn't work when deployed to heroku, but somehow it still does. You can see my demo app as well as this screenshot where the third party CSS was packaged.

• working slider that uses css from node_modules: https://test-css-staging.herokuapp.com/
• screenshot that shows the slider and the css:

You can also shell into the heroku app and see the library in node_modules. You can see other libraries from "devDependencies" in node_modules, like eslint.

Testing Instructions

• Create new app with cookiecutter.
• Create a basic React component and render it on a page.
• Download an npm package that requires you to import their css. rc-slider is a quick and easy one.
• Import the CSS into the React component.
• Make sure the CSS works and the app doesn't crash when you visit the page with the CSS.
• Make sure you can see the CSS in the HTML header.
• For good measure, you can deploy the test app to heroku and make sure it works as expected.
• Review documentation for clarity and correctness.

[derekeder]

@smcalilly I may be missing something in my setup, but after adding rc-slider i'm not seeing it on my demo app:

React code:

import React from 'react'
import ReactDOM from 'react-dom'
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

function Home() {
    return (
      <>
        <p><strong>Hello, React!</strong></p>
        <Slider />
        <Range />
      </>
    )
}

ReactDOM.render(
  React.createElement(Home, window.props),
  window.reactMount,
)

[smcalilly]

@derekeder hmm. could you please share the repo code?

[derekeder]

@smcalilly yup this is what i got: https://github.com/datamade/browserify-test

[smcalilly]

@derekeder That's strange since the rc-slider docs have both of those components together in their main example. It works whenever I remove the <Range /> component and just leave <Slider />

import React from 'react'
import ReactDOM from 'react-dom'
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

function Home(props) {
    return (
      <div>
        <p><strong>Hello, React!</strong></p>
        <Slider />
      </div>
    )
}

ReactDOM.render(
  React.createElement(Home, window.props),
  window.reactMount,
)

I get the same error when I render only the Range component without the Slider component: