Kev's Development Toolbox

March 15, 2017

Adding react-bootstrap to a React app

Adding Bootstrap to an existing or new React app is not as obvious or easy as you would think, because of Bootstrap’s dependencies on other libraries, like jQuery (and see answers to Quora question here).

The react-bootstrap module is a React specific implementation of Bootstrap that provides JSX components for a number of the Bootstrap provided styles and components, and even layout CSS encapsulated as JSX components like: <Grid>, <Row> and <Col>

Installing it via npm is as simple as:

npm intall --save react-boostrap

You then import what you need from the module like:

import {Bootstrap, Grid, Row, Col} from 'react-bootstrap';

and then you quickly discover that the CSS based layout is not working like you’d expect. If you check the Getting Started section it mentions:

Because React-Bootstrap doesn’t depend on a very precise version of Bootstrap, we don’t ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

Ok. So you can follow their example and load from the Bootstrap (or other) CDN, but what if you want to manage Bootstrap as an npm module too? This question is answered in this post here. What you need is to install bootstrap:

npm install --save bootstrap

and then include it into your main App.jsx with:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

and you’re up and running. Not that obvious but once you’ve setup this once, probably makes more sense the next time.

March 14, 2017

React: ‘Element type is invalid … check your render method’

Once you’ve seen this error once in your React app you’ll probably instantly recognize it and know exactly what this means:

Uncaught Error: Element type is invalid: expected a string 
(for built-in components) or a class/function (for composite 
components) but got: object. You likely forgot to export your 
component from the file it's defined in. Check the render 
method of `App`.

The key is “You likely forgot to export your component…” which was exactly the issue in my case.

If you have an ES6 style component this:

class App extends Component {
...
}

… check that you’ve exported it at the end of the source file with:

export default App;

March 12, 2017

Appending values to the end of a file from a Unix shell

Some things you do repeatedly from a *nix shell are incredibly useful and time-saving that you do them without thinking about it. Say for example you need to add a file or directory name to a file like .gitignore. On Windows you might open an editor and add the new lines to the end of the file and save it, but in a *nix shell (I imagine there’s a comparable approach maybe using something like Windows Powershell too), you can do:

echo "newfile" >> .gitignore

and you’re done.

March 12, 2017

Running a React app in a Docker container

I started converting my AngularJS AddressBook app into React. Since this is part of a larger project to run all the parts of my app in Docker containers with Docker Compose, I needed to look at how I can run my React app in a container.

For development, using the webpack dev server works well locally. Running this from within a container though requires doing an ‘npm install’ and a ‘npm run build’ inside the container, which probably doesn’t make sense to run every time, as with all the npm dependencies from create-react-app this take some time to run.

The other option is to build the app locally and then just build a container with the webpack output, and serve it with an HTTP server like nginx.

Let’s take a look at each of these options.

The easiest and simplest approach is to build the app locally first, as you normally would:

npm install
npm run build

A Dockerfile to build the container using the output from ‘npm run build’ then looks like (using an nginx image as a starting point):

FROM nginx
COPY build /usr/share/nginx/html

You build this with:

docker build -t addressbook-react-web-nginx .

And then run with:

docker run -it -p 80:80 addressbook-react-web-nginx

Next up, for a comparison, the Dockerfile to push everything into the image and run with ‘npm run start’ inside the container would look like:

FROM node:6.10-alpine
RUN mkdir -p /home/web
COPY *.html /home/web/
COPY public /home/web/public/
COPY src /home/web/src/
COPY *.json /home/web/
WORKDIR "/home/web"
RUN npm install
ENTRYPOINT npm run start

This is starting from one of the official node images. It copies in all the source files, runs npm install and then sets the entrypoint for when the container starts to run the webpack dev server.

An improvement on this approach could be to build an intermediate container with the package.json and npm install already run, and then build new images from this incrementally adding just the changed source files. Plenty of options to explore depending on what you need to do.

Next up, modify my previous docker compose file to include one of these new images containing my React app and now I’ve got all the pieces ready to go.