{"id":13495158,"url":"https://github.com/YannickFricke/gulp-webpack-typescript-react-sass-boilerplate","last_synced_at":"2025-03-28T16:31:31.734Z","repository":{"id":146626491,"uuid":"88337531","full_name":"YannickFricke/gulp-webpack-typescript-react-sass-boilerplate","owner":"YannickFricke","description":"Small not opinionated react.js boilerplate","archived":false,"fork":false,"pushed_at":"2019-01-21T19:51:31.000Z","size":13,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-31T10:36:30.806Z","etag":null,"topics":["autoprefixer","boilerplate","browser-sync","gulp","react","react-router-dom","redux","sass","sourcemaps","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/YannickFricke.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-04-15T09:33:49.000Z","updated_at":"2019-03-23T11:45:51.000Z","dependencies_parsed_at":"2023-04-05T06:47:07.371Z","dependency_job_id":null,"html_url":"https://github.com/YannickFricke/gulp-webpack-typescript-react-sass-boilerplate","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YannickFricke%2Fgulp-webpack-typescript-react-sass-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YannickFricke%2Fgulp-webpack-typescript-react-sass-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YannickFricke%2Fgulp-webpack-typescript-react-sass-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YannickFricke%2Fgulp-webpack-typescript-react-sass-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YannickFricke","download_url":"https://codeload.github.com/YannickFricke/gulp-webpack-typescript-react-sass-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246062796,"owners_count":20717686,"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":["autoprefixer","boilerplate","browser-sync","gulp","react","react-router-dom","redux","sass","sourcemaps","typescript","webpack"],"created_at":"2024-07-31T19:01:31.822Z","updated_at":"2025-03-28T16:31:31.390Z","avatar_url":"https://github.com/YannickFricke.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Gulp Webpack TypeScript React Sass Boilerplate\n\n## Getting started\nClone or download this repository. Run `\"npm install\"` to install all dependencies\n\n## Available scripts\n`\"npm run dev\"` Runs the internal development server on port 3000 with browser-sync\n\n`\"npm run release\"` Compiles all files and stores them in the \"dist\" directory (without sourcemaps)\n\n## Technology stack\n* [gulp](http://gulpjs.com/)\n* [webpack](https://webpack.js.org/)\n* [TypeScript (2.2.2)](http://www.typescriptlang.org/)\n* [react.js](https://facebook.github.io/react/)\n* [Sass](https://sass-lang.com/) + [autoprefixer](https://github.com/postcss/autoprefixer)\n* [browser-sync](https://www.browsersync.io/)\n* [redux](http://redux.js.org/) + [react.js bindings](https://github.com/reactjs/redux)\n* [react router dom](https://www.npmjs.com/package/react-router-dom)\n\n## Other useful informations\n* Integrated TypeScript definition files for react.js + redux + react-redux + node\n* Integrated sourcemaps (for a better development experience)\n* Uglify CSS and JS when you want to release\n* Automatic reload when you made changes to an existing or new file!\n* Integration of redux-dev-tools [Firefox Plugin](https://addons.mozilla.org/en-US/firefox/addon/remotedev/) [Chrome Plugin](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)\n\n## Why should I use this boilerplate?\nMost of the boilerplates are blown up. This one is slim and contains only **some** things you need. I don't want to prescribe which software you should use and which not. Amongst other things this boilerplate offers the whole strength of TypeScript. It was never better to develop a frontend application with a \"typed\" language. It's much more less error prone! Togeather with Sass and autoprefixer you have the ultimate tools to speed up the css development process.\n\n## Where to start?\nYour code and images lives in the \"src\" directory. From there everything gets compiled and copied to the \"public\" directory when you run `\"npm run dev\"`.\n\n### Editing sass\nEdit \"src/sass/index.scss\" (there is also some example code to show you how sass works).\n\n### Creating a new reducer\nCreate a new interface in the \"src/ts/StoreTypes.ts\" file that matches your needs. That interface will be used in every component that depends on that piece of state.\nCreate a new file in the \"src/ts/reducers/\" directory. Take a look on the existing \"appReducer\" to see, how it should be done. In the switch block you define with every case a new action that the reducer can handle.\n\n### Creating a new action\nCreate a new file in the \"src/ts/actions\" directory. The filename should start with the name of the reducer, to which the actions belong. You should consider to take a look on the existing \"AppStoreActions.ts\" to see, how you can get started.\n\n### Creating a new component\nFinally you want to create a react component. Fine! The boilerplate provides two examples\n* Normal react component (src/ts/components/NotFound.tsx)\n* redux connected component (src/ts/App.tsx)\n\n### Creating a new route\nOpen the file \"src/ts/index.tsx\". There can you find two example routes.\n`\u003cRoute exact path=\"/\" component={App} /\u003e` this routes matches, when we are at the entry point of the application.\n`\u003cRoute component={NotFound}/\u003e` this routes matches, when no other match (in other words 404).\nThe switch helps us, that only one route matches.\n\n### Working with parameters\nLets assume you have the following route `\u003cRoute path=\"/my/path/:parameter\" component={App} /\u003e`, then you can get the parameter from your component with `this.props.match.params.parameter`.\n\n## Post scriptum\nMake TypeScript great (again) and happy hacking!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYannickFricke%2Fgulp-webpack-typescript-react-sass-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FYannickFricke%2Fgulp-webpack-typescript-react-sass-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FYannickFricke%2Fgulp-webpack-typescript-react-sass-boilerplate/lists"}