{"id":15504553,"url":"https://github.com/alanbsmith/react-sinatra-example","last_synced_at":"2025-04-23T01:06:48.651Z","repository":{"id":53881730,"uuid":"52330044","full_name":"alanbsmith/react-sinatra-example","owner":"alanbsmith","description":"an example app for using Sinatra with React and Webpack","archived":false,"fork":false,"pushed_at":"2018-02-12T15:58:29.000Z","size":56,"stargazers_count":104,"open_issues_count":1,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T01:06:42.881Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alanbsmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-23T04:27:11.000Z","updated_at":"2024-10-31T18:21:57.000Z","dependencies_parsed_at":"2022-09-05T08:40:27.900Z","dependency_job_id":null,"html_url":"https://github.com/alanbsmith/react-sinatra-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Freact-sinatra-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Freact-sinatra-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Freact-sinatra-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Freact-sinatra-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanbsmith","download_url":"https://codeload.github.com/alanbsmith/react-sinatra-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250349055,"owners_count":21415914,"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":[],"created_at":"2024-10-02T09:18:53.694Z","updated_at":"2025-04-23T01:06:48.635Z","avatar_url":"https://github.com/alanbsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + Sinatra Starter\n_for [Heroku](https://www.heroku.com/) deployment_\n\n## OVERVIEW\nThis is a simple starter to get you up and running with React \u0026 Sinatra. This is intended to provide:\n\n* a lightweight Webpack config (for development and production)\n* some helpful tooling for development workflow\n* Heroku-ready deployment setup\n\n#### WHY REACT + SINATRA?\nThis starter has been a surprisingly valuable tool. Sinatra provides a really simple web framework for serving our React frontend. You can quickly add some API endpoints (and/or GraphQL) and connect ActiveRecord. We get all the benefits of using Ruby's simple syntax and predicability, and React's powerful rendering.\n\n## UP \u0026 RUNNING\n* Clone the repo\n* Install Ruby dependencies: `$ bundle install`\n* Install JS dependencies: `$ npm install` _or_ `$ yarn`\n* Fire up a dev server: `$ npm run dev` _or_ `$ yarn dev`\n* Visit `http://localhost:8080` in your browser\n\n#### WHATS HAPPENING?\nWhen you run `npm run dev`, webpack is transpiling all your JS and CSS into a ghost file, `lib/app/public/bundle.js`. It then serves up the HTML file, `lib/app/views/index.html` on a ghost Express server on port 8080.\n\n#### BUT WAIT, WE'RE NOT USING A SINATRA SERVER?\nThat's correct. To use the Puma server for Sinatra with the transpiled assets, take a look at the [Production Build section](#production-build)\n\n## LINTING\nTo run the linter once:\n```\n$ npm run lint\n// or\n$ yarn lint\n```\n\nTo run the watch task:\n```\n$ npm run lint:watch\n// or\n$ yarn lint:watch\n```\n\n## TESTING\nTo run the tests:\n```\n$ npm test\n// or\n$ yarn test\n```\n\n## PRODUCTION BUILD\n\n- run `$ npm run build` _or_ `$ yarn build`\n- run `ruby lib/app.rb` (We're using Puma by default)\n\nThis creates a transpiled asset file (`bundle.js`) of your JS and CSS in the `lib/app/public/` directory. This is great for production, but not so hot for development workflow as you would need to transpile _every time_ you made a change to the JS.\n\n## DEPLOYING TO HEROKU\nThis app is set up for deployment to Heroku!\n\n_This assumes you have already have a Heroku account and have the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli) installed_\n\n🚨 _Be sure to run the build script before deploying._ 🚨\n\n```\n$ heroku login\n$ heroku create -a name-of-your-app\n$ git push heroku master\n$ heroku open\n```\n\nIf you're unfamiliar with Heroku deployment (or just need a refresher), they have a really great walkthrough [here](https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction).\n\n\n## CHANGELOG\n\n### v1.0.0\nThis app has been updated to use React v15.5 and Webpack 2.3! 🎉\n\n**Major Changes:**\n\n* Updates React and ReactDOM to v15.5\n* Updates Webpack to v2.3\n* Enables hot-reloading for local development\n* Adds initial test suite with Enzyme, Expect, and Mocha\n\n**Minor Changes:**\n\n* Updates all other dependencies to latest\n* Updates eslint rules\n* Updates npm scripts\n* Adds yarn.lock\n* Updates README\n\n### v0.1.0\nInitial release. Basic setup for a React + Sinatra integration\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Freact-sinatra-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanbsmith%2Freact-sinatra-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Freact-sinatra-example/lists"}