{"id":20389808,"url":"https://github.com/ghondar/crassa","last_synced_at":"2025-04-12T10:52:39.492Z","repository":{"id":33220342,"uuid":"155298601","full_name":"ghondar/crassa","owner":"ghondar","description":"Create React App Server Side Application","archived":false,"fork":false,"pushed_at":"2022-12-10T18:54:35.000Z","size":3264,"stargazers_count":14,"open_issues_count":17,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T05:51:07.502Z","etag":null,"topics":["cli","crassa","create-react-app","react","reactjs","redux","redux-duck","redux-saga","server-side-application","ssr","universal"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ghondar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-30T00:14:15.000Z","updated_at":"2023-06-26T15:37:09.000Z","dependencies_parsed_at":"2023-01-15T00:00:20.243Z","dependency_job_id":null,"html_url":"https://github.com/ghondar/crassa","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Fcrassa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Fcrassa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Fcrassa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghondar%2Fcrassa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghondar","download_url":"https://codeload.github.com/ghondar/crassa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248557844,"owners_count":21124165,"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":["cli","crassa","create-react-app","react","reactjs","redux","redux-duck","redux-saga","server-side-application","ssr","universal"],"created_at":"2024-11-15T03:19:47.404Z","updated_at":"2025-04-12T10:52:39.474Z","avatar_url":"https://github.com/ghondar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :sparkles: Create React App Server Side Application\n## :battery: A CLI tool to create React + Server Side with one command \n\n#### **This project is a fork of [Crana](https://github.com/scriptify/crana)**\n\n:bulb: To get up and running with an application with a node.js backend and a React frontend, just execute:\n\n```bash\nyarn global add crassa\ncrassa init \u003cprojectName\u003e [projectFolder]\n```\n\n...and you are ready to go!\n\nThis will equip you with all important tools you're going to need to develop powerful applications, for example __Live reaload__ for the server and the frontend out of the box.\nWebpack, Babel, ESLint, StyleLint, Nodemon etc. etc., all preconfigured out of the box, so that you can focus on the important stuff!\n\n:computer: __Now start developing!__\n```bash\nyarn dev\n```\nThis will fire up the backend and the frontend development server. Just edit files under __src__ and see what happens!\n\n:warning: Crassa is in early stage of development and may not meet all your requirements. That's why contributions of any kind are highly appreciated, as the best tools are built by communities!\n\n## RoadMap\n\n- [x] Analize and crate paramater in crassa to generate templates\n- [ ] Create server templates\n- [x] Migrate to plop library\n- [x]  Generate advance template\n  - [x] Create folder function with validation\n  - [x] Create file function\n  - [x] Create reduce index file template\n  - [x] Concate new reducer to index.js reducers file from project\n  - [x] Concate new takes to rootSaga\n  - [x] Create sagas file template\n  - [x] Create takes file template\n- [ ] Generate basic template\n- [ ] Update documentation\n\n\n## Usage\n:sos: Show all crassa's commands.\n```bash\ncrassa --help\n```\n:star: Create a new crassa project.\n```bash\ncrassa init \u003cprojectName\u003e [projectFolderName]\n```\n:dizzy: Concurrently starts the frontend and the backend in development mode.\n```bash\nyarn dev\n```\n:books: See how many LOC you've already written.\n```bash\nyarn count\n```\n\n:mag: Executes eslint and styleling in autofix mode.\n\n```bash\nyarn lint\n```\n:car: Starts the project for production with server side.\n```bash\nyarn start\n```\n:dizzy: Starts the project for production with server side with nodemon.\n```bash\nyarn start:dev\n```\n:blue_car: Creates a production build for the frontend application.\n```bash\nyarn build\n```\n\n## Project structure\nThe interesting files for you are all located in the __src__ folder. The src folder has three subfolders:\n- src\n- server\n\nAs you can imagine, the __src__ folder contains all files for the React frontend application and the __server__ folder contains all files for the node.js backend.\n\n## Custom Template\nYou'll be able create custom template from github to generate your initial project:\nGithub repository structure [like](https://github.com/ghondar/counter-with-redux-ducks-and-sagas-template):\n\n```bash\n.\n└── template\n    ├── nodemon.json\n    ├── public\n    │   ├── favicon.ico\n    │   ├── index.html\n    │   └── manifest.json\n    ├── server\n    │   ├── index.js\n    │   └── v1\n    │       ├── counter\n    │       │   └── index.js\n    │       └── index.js\n    └── src\n        ├── App.js\n        ├── App.test.js\n        ├── components\n        │   └── Common\n        │       └── Loading.js\n        ├── containers\n        │   ├── Dashboard.js\n        │   ├── DevTools.js\n        │   ├── Root.dev.js\n        │   ├── Root.js\n        │   └── Root.prod.js\n        ├── index.js\n        ├── lib\n        │   └── Request.js\n        ├── reducers\n        │   ├── base.js\n        │   ├── counter.js\n        │   └── index.js\n        ├── registerServiceWorker.js\n        ├── routes\n        │   └── index.js\n        ├── sagas\n        │   ├── counter.js\n        │   └── index.js\n        ├── setupProxy.js\n        └── store\n            ├── configureStore.dev.js\n            ├── configureStore.js\n            └── configureStore.prod.js\n├── .gitignore\n├── .npmrc\n└── package.json\n```\n\nWhere package.json basically it must have name and displayName tag with {-- project-name --} and crassa with version tag {-- project-version --} like this:\n\n```json\n{\n    \"name\": \"{-- project-name --}\",\n    ...\n    \"crassa\": {\n        \"displayName\": \"{-- project-name --}\",\n    },\n    ...\n    \"dependencies\": {\n        \"crassa\":  \"{-- project-version --}\",\n        ...\n    },\n    ...\n}\n```\n\nYou can put your git when crassa cli ask you to choose between next or custom template, the url mus to have this structure:\n\n- ghondar/counter-with-redux-ducks-and-sagas-template\n- grovertb/crasa-template-antd\n- grovertb/crasa-template-material-ui\n\n## Environments\n\nYou can configure the project environment variables\n\n```\n  \u003e REACT_APP_PORT_SERVER=5000 // Port of server this is optional \n  \u003e REACT_APP_REST_API_LOCATION=http://localhost:5000 // Domain the server application\n  \u003e REACT_APP_API_VERSION=v1 // Api version for default is v1\n  \u003e BODY_PARSER_LIMIT=10mb // Configure size limit body-parser\n```\n\n## Extensions\n\nHere (__server__ folder) you can extend universal middleware creating __preLoadState.js__ file to dispatch action from server to load initial state into redux store.\n\nExample: (__/server/preLoadState.js__)\n\n```javascript\nimport counterDuck from 'reducers/counter'\n\nexport default function(req, res, next) {\n  // Get store from locals\n  const { store } = res.locals\n  // Show local resources\n  console.log(res.locals)\n  // Dispatch a action to change initial state\n  store.dispatch(counterDuck.creators.addCount())\n  // Resave new store\n  res.locals.store = store\n  // Pass middlerware\n  next()\n}\n```\n\nHere (__server__ folder) you can get the html created in __universal.js__  to modify the initial load of DOM or wrapping your app src react project.\n\nExample: (__/server/universal.js__)\n\n```javascript\nimport { renderToString } from 'react-dom/server'\n\nexport const setRenderUniversal = (locals, app, extractor) =\u003e {\n    const { htmlData } = locals // htmlData, store, history\n    \n    // store =\u003e access to store ( redux )\n    // extractor.getStyleTags() =\u003e access to styles of the app\n\n    const renderString = renderToString(app) // wrapping optional\n\n    const style = `\n      \u003cstyle id='css-server-side' type=\"text/css\"\u003e\n        html { margin:0px; padding:0px }\n      \u003c/style\u003e\n    `\n\n  return {\n    prevHtml: html.replace('\u003chead\u003e', `\u003chead\u003e${style}`),\n    renderString // optional\n  }\n}\n```\n\nWe handle initial configuration [here](https://github.com/ghondar/crassa/blob/master/config-overrides.js) adding babel plugins ([transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports), [loadable-components](https://github.com/smooth-code/loadable-components) and [transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types)) and webpack alias (basic alias from __package.json__) but you can extend this initial configuration adding to your root project __config-overrides.js__ file.\n\nExample: (__/configExpress.js__)\n\n```javascript\nimport express from 'express'\nimport session from 'express-session'\nimport { resolve } from 'path'\n\nexport default function(app) {\n  app.use(\n    session({\n      secret           : 'Cr4ss4',\n      resave           : true,\n      saveUninitialized: true\n    })\n  )\n\n  app.use('/src', express.static(resolve(__dirname, './static')))\n   \n  return app\n}\n```\n\nWith __configExpress.js__ you can add configurations to express, like statics, uses or add web sockets too.\n\nExample: (__/config-overrides.js__)\n\n```javascript\nconst { override, addWebpackAlias, addBundleVisualizer } = require('customize-cra')\n\nmodule.exports = override(\n  process.env.BUNDLE_VISUALIZE == 1 \u0026\u0026 addBundleVisualizer()\n)\n```\n\n## Technologies\n\nAs soon as you bootstrapped a new project, you have an application running with:\n\n- Node.js with [Express](https://github.com/expressjs/express) backend.\n- React for frontend with [Create React App v2](https://github.com/facebook/create-react-app), [Redux](https://github.com/reduxjs/redux), [Redux Saga](https://github.com/redux-saga/redux-saga) and [Extensible-Duck](https://github.com/investtools/extensible-duck).\n- [React-App-Rewired](https://github.com/timarney/react-app-rewired) with [Customize-cra](https://github.com/arackaf/customize-cra) to provide a set of utilities to customize the Create React App v2.\n\nUnder the hood it uses Webpack, Babel, ESLint with a few other plugins enabling a powerful development workflow.\n\n## Known constraints/issues\n\n### Windows Linux Subsystem\nIf you're using Windows Linux Subsystem, eslint will not immediatly work. You need to edit the path under `.vscode/settings.json`.\nReplace `C:/mnt/c` with `C:` and it should work.\n\n## Contributing\nHave a look at [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Code of conduct\nHave a look at [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghondar%2Fcrassa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghondar%2Fcrassa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghondar%2Fcrassa/lists"}