{"id":20923711,"url":"https://github.com/cloverinteractive/boilerplate","last_synced_at":"2026-04-10T05:02:47.218Z","repository":{"id":45995525,"uuid":"94842791","full_name":"cloverinteractive/boilerplate","owner":"cloverinteractive","description":"React and ReasonReact starter with SSR","archived":false,"fork":false,"pushed_at":"2021-05-12T00:17:40.000Z","size":1931,"stargazers_count":14,"open_issues_count":5,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T04:47:14.757Z","etag":null,"topics":["boilerplate","es6","eslint","javascript","react","reasonml","server-side-rendering","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"Reason","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloverinteractive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-20T02:49:32.000Z","updated_at":"2021-12-30T17:27:45.000Z","dependencies_parsed_at":"2022-07-20T05:47:41.323Z","dependency_job_id":null,"html_url":"https://github.com/cloverinteractive/boilerplate","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloverinteractive%2Fboilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloverinteractive%2Fboilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloverinteractive%2Fboilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloverinteractive%2Fboilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloverinteractive","download_url":"https://codeload.github.com/cloverinteractive/boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253981669,"owners_count":21994314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","es6","eslint","javascript","react","reasonml","server-side-rendering","typescript","webpack"],"created_at":"2024-11-18T20:17:29.984Z","updated_at":"2026-04-10T05:02:47.131Z","avatar_url":"https://github.com/cloverinteractive.png","language":"Reason","funding_links":[],"categories":[],"sub_categories":[],"readme":"[ ![Codeship Status for cloverinteractive/boilerplate](https://app.codeship.com/projects/32a66b90-7cbd-0135-5c44-361f0802280c/status?branch=master)](https://app.codeship.com/projects/245775)\n[![Coverage Status](https://coveralls.io/repos/github/cloverinteractive/boilerplate/badge.svg)](https://coveralls.io/github/cloverinteractive/boilerplate)\n\n# Faster application bootstrapping\n\nTired of having to configure a pretty large boilerplate each time you're about to start a new React project? This project\nmay be right up your alley.\n\n## Pre-requisites\n\nThere is only one pre-requisite to successfully run this boilerplate and that is a recent installation of **Node.js®** you can find an installer for your OS [here](https://nodejs.org/en/)\nor use your OS's favorite package manager.\n\n## Installation\n\nTo start using this you have a couple of options:\n\n### Use curl to download\n\nIf you have `curl`, `gzip` and `tar` you can curl straight into `tar` like this:\n\n```sh\ncurl -L \"https://github.com/cloverinteractive/boilerplate/archive/stable.tar.gz\" | tar -zxvf -\ncd boilerplate-stable # Go into the boilerplate folder\nnpm install\n```\n\n### Download zip file from browser\n\nIf you prefer using a browser just click [here](https://github.com/cloverinteractive/boilerplate/archive/stable.zip) to get the latest stable zip file.\nOnce unziped just go into the project folder and run `npm install`\n\n\n### Git clone this repository\n\nYou can always just clone this repository using git:\n\n```sh\ngit clone --branch stable git@github.com:cloverinteractive/boilerplate.git\ncd boilerplate\nnpm install\n```\n\n# Bundled libraries\n\n* [Babel](https://babeljs.io/) - The compiler for writing next generation JavaScript\n* [Eslint](https://eslint.org/) - Pluggable JavaScript linter\n* [Express](https://expressjs.com/) - Fast, unopinionated, minimalist web framework for Node.js\n* [ReasonML](https://reasonml.github.io/) - Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript \u0026 OCaml ecosystems.\n* [TypeScript](https://www.typescriptlang.org/) - A typed superset of JavaScript that compiles to plain Javascript.\n* [Jest](https://jestjs.io/) - Jest is a delightful JavaScript Testing Framework with a focus on simplicity.\n* [React](https://facebook.github.io/react/) - A JavaScript library for building user interfaces\n* [React Router](https://reacttraining.com/react-router/) - Declarative Routing for React.js\n* [Webpack](https://webpack.js.org/concepts/) - Webpack is a module bundler for modern JavaScript applications.\n\n## Server Rendering\n\nThe server code lives in `src/server`, express will automatically render your components\nwith every new request, the idea is that search engines can index pages with content instead of blank html templates.\n\n# Running the app\n\nThe app reads your current `NODE_ENV` environment variable, when set to *production* it will run express with the statically built asset,\nwhen set to anything else it will run the app through *webpack-dev-server* with hmre.\n\n```sh\nnpm start # Run in development mode\nnpm run start:prod # Run in production mode\n```\n\n*NOTE*: Keep in mind that starting in production relies on your code being built first and your `NODE_ENV` to be set to\n`production`. Read the [Building the app](#building-the-app) section for more info on this.\n\n## Running in Docker\n\nAnother way to run the app in production is to use docker just try the following:\n\n```sh\ndocker build -t boiler .\ndocker run --rm -it -p 8080:8080 boiler\n```\n\nAfter running this you should be able to visit the production build via `http://localhost:8080`.\n\n## Building the app\n\nWe use *webpack* to build our bundles, just run `npm run build` this will build your bundle into the `build` (server code) and `public` (browser code)\ndirectories with every asset in packaged.\n\n### Do I need to build?\n\nIf you're only running this app in development environment then no, you only need to build for to run in production.\n\n# Where is everything?\n\nEvery part of the app's boilerplate is organized in it's own folder, here's a quick rundown of how things are organized:\n\n1. Webpack configuration is in the `config/webpack` folder.\n1. All code live in the `src/` folder.\n1. Server code specifically can ben found at `src/server`.\n1. ReasonML tests live inside `__tests__` folder, tests are suffixed by *_test.re* and flat directory structure at the module level.\n1. TypeScript and Javascript tests are at the same folder the file they're testing is, tests are suffixed by *.test*.\n\n## Practices\n\nThese are recommendations, you should write code in any way that makes sense for you and your app.\n\n### ReasonML\n\nWe've includen support for [ReasonML](https://reasonml.github.io/), we think it's a step in the right direction for writing type safe,\ncode that builds fast and is runtime error free, it also feels like the perfect language to write react components in.\n\nReason types will be checked automatically at compile time; if you need to share types with [TypeScript](https://www.typescriptlang.org/)\nwe've preconfigured [genType](https://github.com/cristianoc/genType), just tag the types you'd like to share with `[@genType]` and voilà\nyou just need to import from `YourFile.gen` in your [TypeScript](https://www.typescriptlang.org/) and you'll be good to go.\n\nWe recommend looking at the [genType](https://github.com/cristianoc/genType) documentation for more advance tagging tips.\n\n### TypeScript\n\nWe've included [TypeScript](https://www.typescriptlang.org/) support, if you're not ready to get your feet wet with ReasonML we recommend using \ntypescript you should feel right at home and can start adding type annotations at your own pace, we recommend reading\n[this](https://www.typescriptlang.org/docs/handbook/react-\u0026-webpack.html#write-some-code) guide on how to write React components with TypeScript.\n\n```sh\nnpm run check-types # Check all TypeScript files\n```\n\nYou can still access `tsc` directly via `npx` like so:\n\n```sh\nnpx tsc\n```\n\n### Run eslint\n\nEven if we're sure we haven't introduced anything new, it can't hurt to lint check our files, you can lint your whole project by running:\n\n```sh\nnpm run lint # Runs eslint against the whole codebase (except compiled code)\n```\n\nYou can access `eslint` directly via `npx` like so:\n\n```sh\nnpx eslint --ext .jsx src/components/Messages.jsx # Lint a single file\nnpx eslint --fix --ext .jsx src/components/Messages.jsx # Lint and try to fix a single file\n```\n\n### Write tests, run tests\n\nIf you're modifying or introducing a new feature, make sure to write/update a test for it, if you remove a file make sure to remove the test cases/examples for\nthe code you removed.\n\n```sh\nnpm test # Runs the whole test suite\nnpm test -- src/components/Messages.test.jsx # Runs a single test file\nnpm run test:coverage # Runs full test suite and calculates code coverage\n```\n\n# Recommendations\n\nThere are no enforced rules on how to write your code, this is how we've written things and what works for us.\nHowever you should do what makes sense to you and your app.\n\n* Use [ReasonML](https://reasonml.github.io/) to write as much code as you feel comfortable with.\n* Use `.jsx` and `.tsx` extension for React components written in ES6 or TypeScript.\n* When writing [ReasonML](https://reasonml.github.io/) use valid module names for each test suffixed by `_test.re` and place them under `__tests__`\nat your module level\n* When writing tests for ES6 or TypeScript put tests right next to the file they're testing so they're caught by `eslint` too.\n* Favor types over `PropTypes`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloverinteractive%2Fboilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloverinteractive%2Fboilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloverinteractive%2Fboilerplate/lists"}