A CLI tool to create React + Server Side with one command
npm install @crassa/next#### This project is a fork of Crana
:bulb: To get up and running with an application with a node.js backend and a React frontend, just execute:
``bash`
yarn global add @crassa/next
crassa init
...and you are ready to go!
This 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.
Webpack, Babel, ESLint, StyleLint, Nodemon etc. etc., all preconfigured out of the box, so that you can focus on the important stuff!
:computer: __Now start developing!__
`bash`
yarn dev
This will fire up the backend and the frontend development server. Just edit files under __src__ and see what happens!
: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!
bash
crassa --help
`
:star: Create a new crassa project.
bash
crassa init [projectFolderName]
`
:dizzy: Concurrently starts the frontend and the backend in development mode.
bash
yarn dev
`
:books: See how many LOC you've already written.
bash
yarn count
`:mag: Executes eslint and styleling in autofix mode.
bash
yarn lint
`
:car: Starts the project for production with server side.
bash
yarn start
`
:dizzy: Starts the project for production with server side with nodemon.
bash
yarn start:dev
`
:blue_car: Creates a production build for the frontend application.
bash
yarn build
`Project structure
The interesting files for you are all located in the __src__ folder. The src folder has three subfolders:
- src
- serverAs 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.
Custom Template
You'll be able create custom template from github to generate your initial project:
Github repository structure like:bash
.
└── template
├── nodemon.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── server
│ ├── index.js
│ └── v1
│ ├── counter
│ │ └── index.js
│ └── index.js
└── src
├── App.js
├── App.test.js
├── components
│ └── Common
│ └── Loading.js
├── containers
│ ├── Dashboard.js
│ ├── DevTools.js
│ ├── Root.dev.js
│ ├── Root.js
│ └── Root.prod.js
├── index.js
├── lib
│ └── Request.js
├── reducers
│ ├── base.js
│ ├── counter.js
│ └── index.js
├── registerServiceWorker.js
├── routes
│ └── index.js
├── sagas
│ ├── counter.js
│ └── index.js
├── setupProxy.js
└── store
├── configureStore.dev.js
├── configureStore.js
└── configureStore.prod.js
├── .gitignore
├── .npmrc
└── package.json
`Where package.json basically it must have name and displayName tag with {-- project-name --} and crassa with version tag {-- project-version --} like this:
json
{
"name": "{-- project-name --}",
...
"crassa": {
"displayName": "{-- project-name --}",
},
...
"dependencies": {
"@crassa/next": "{-- project-version --}",
...
},
...
}
`You can put your git when crassa cli ask you to choose between next or custom template, the url mus to have this structure:
- ghondar/counter-with-redux-ducks-and-sagas-template
- grovertb/crasa-template-antd
- grovertb/crasa-template-material-ui
Environments
You can configure the project environment variables
> REACT_APP_PORT_SERVER=5000 // Port of server this is optional
> REACT_APP_REST_API_LOCATION=http://localhost:5000 // Domain the server application
> REACT_APP_API_VERSION=v1 // Api version for default is v1
> BODY_PARSER_LIMIT=10mb // Configure size limit body-parser
Extensions
Here (__server__ folder) you can extend universal middleware creating __preLoadState.js__ file to dispatch action from server to load initial state into redux store.
Example: (__/server/preLoadState.js__)
javascript
import counterDuck from 'reducers/counter'export default function(req, res, next) {
// Get store from locals
const { store } = res.locals
// Show local resources
console.log(res.locals)
// Dispatch a action to change initial state
store.dispatch(counterDuck.creators.addCount())
// Resave new store
res.locals.store = store
// Pass middlerware
next()
}
`Here (__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.
Example: (__/server/universal.js__)
javascript
import { renderToString } from 'react-dom/server'export const setRenderUniversal = (locals, app, extractor) => {
const { htmlData } = locals // htmlData, store, history
// store => access to store ( redux )
// extractor.getStyleTags() => access to styles of the app
const renderString = renderToString(app) // wrapping optional
const style =
return {
prevHtml: html.replace('
', ),
renderString // optional
}
}
`We handle initial configuration here adding babel plugins (transform-imports, loadable-components and 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.
Example: (__/configExpress.js__)
javascript
import express from 'express'
import session from 'express-session'
import { resolve } from 'path'export default function(app) {
app.use(
session({
secret : 'Cr4ss4',
resave : true,
saveUninitialized: true
})
)
app.use('/src', express.static(resolve(__dirname, './static')))
return app
}
`With __configExpress.js__ you can add configurations to express, like statics, uses or add web sockets too.
Example: (__/config-overrides.js__)
javascript
const { override, addWebpackAlias, addBundleVisualizer } = require('customize-cra')module.exports = override(
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer()
)
`Technologies
As soon as you bootstrapped a new project, you have an application running with:
- Node.js with Express backend.
- React for frontend with Create React App v2, Redux, Redux Saga and Extensible-Duck.
- React-App-Rewired with Customize-cra to provide a set of utilities to customize the Create React App v2.
Under the hood it uses Webpack, Babel, ESLint with a few other plugins enabling a powerful development workflow.
Known constraints/issues
$3
If you're using Windows Linux Subsystem, eslint will not immediatly work. You need to edit the path under .
Replace C:/mnt/c with C:` and it should work.