{"id":20987232,"url":"https://github.com/haxpor/jekyll-react-webpack-demo","last_synced_at":"2026-04-09T22:38:56.738Z","repository":{"id":149552975,"uuid":"84096946","full_name":"haxpor/jekyll-react-webpack-demo","owner":"haxpor","description":"Demo boilerplate files/code for integration of Jekyll + React + Webpack. It specifically uses jekyll-assets v.0.2.1 (not newer)","archived":false,"fork":false,"pushed_at":"2017-03-06T17:07:43.000Z","size":53,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-20T07:41:58.316Z","etag":null,"topics":["javascript","jekyll","js","react","webpack"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/haxpor.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-06T16:42:58.000Z","updated_at":"2017-08-28T01:28:02.000Z","dependencies_parsed_at":"2023-06-05T14:45:26.913Z","dependency_job_id":null,"html_url":"https://github.com/haxpor/jekyll-react-webpack-demo","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/haxpor%2Fjekyll-react-webpack-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxpor%2Fjekyll-react-webpack-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxpor%2Fjekyll-react-webpack-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxpor%2Fjekyll-react-webpack-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haxpor","download_url":"https://codeload.github.com/haxpor/jekyll-react-webpack-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243394284,"owners_count":20283940,"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":["javascript","jekyll","js","react","webpack"],"created_at":"2024-11-19T06:16:21.800Z","updated_at":"2025-12-29T22:32:56.861Z","avatar_url":"https://github.com/haxpor.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jekyll-react-webpack-demo\n\nBased and inspired on [Using Webpack and React with Jekyll](https://medium.com/@allizadrozny/using-webpack-and-react-with-jekyll-cfe137f8a2cc#.8argb573b) by Ali Zadrozny.\n\nDemo project contains boilerplate code/files for Jekyll + React + Webpack.\n\nBy the way, this repository aims at the same goal but target **specifically** to use [jekyll-assets](https://github.com/jekyll/jekyll-assets) version `0.2.1` as it didn't remove out ERB feature (newer versions cut this feature out), and improved with bunch of commands to help in development.\n\n# Concept\n\nUse Jekyll to generate static website. React to generate resulting bundle.js file which will be used in Jekyll project, which in turn built by Webpack.\n\n# How to Development\n\nWe need to let both webpack and Jekyll watch the files and automatically build.\n\n## Webpack Watch\n\nGo to project's directory on terminal, then execute command depending on the following cases\n\n1. `development build` - `npm run watch-webpack`\n2. `production build` - `npm run watch-webpack-prod`\n\n## Jekyll Watch/Serve\n\nGo to project's directory on terminal in separate terminal session (still let previous one runs). Then execute,\n\n`npm run dev`\n\nDepend on whether you have run `watch-webpack` or `watch-webpack-prod`, jekyll will pack things up based on that whether it's development or production build.\n\nThis will serve your website on `http://localhost:4001` and whenever files are update, it will automatically build for you then you can refresh on browser to reflect changes.\n\n# Commands\n\nThere are following commands that you can use\n\n* `npm run watch-webpack` - start watching files for webpack for development build\n* `npm run watch-webpack-prod` - start watching files for webpack for production build\n* `npm run dev` - start serving built website on `http://localhost:4001` and watch files at the same time\n* `npm run build` - build website (included with option `--future` of jekyll) at `output` directory.\n\n# License\n\nThis project is under MIT license.\nSee [LICENSE](https://github.com/haxpor/jekyll-react-webpack-demo/blob/master/LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaxpor%2Fjekyll-react-webpack-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaxpor%2Fjekyll-react-webpack-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaxpor%2Fjekyll-react-webpack-demo/lists"}