Nerds Pledge Magnanimously


    0.9.30 • Public • Published

    Create React App Server Side Application

    🔋 A CLI tool to create React + Server Side with one command

    This project is a fork of Crana

    💡 To get up and running with an application with a node.js backend and a React frontend, just execute:

    yarn global add @crassa/next
    crassa init <projectName> [projectFolder]

    ...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!

    💻 Now start developing!

    yarn dev

    This will fire up the backend and the frontend development server. Just edit files under src and see what happens!

    ⚠️ 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!


    🆘 Show all crassa's commands.

    crassa --help

    Create a new crassa project.

    crassa init <projectName> [projectFolderName]

    💫 Concurrently starts the frontend and the backend in development mode.

    yarn dev

    📚 See how many LOC you've already written.

    yarn count

    🔍 Executes eslint and styleling in autofix mode.

    yarn lint

    🚗 Starts the project for production with server side.

    yarn start

    💫 Starts the project for production with server side with nodemon.

    yarn start:dev

    🚙 Creates a production build for the frontend application.

    yarn build

    Project structure

    The interesting files for you are all located in the src folder. The src folder has three subfolders:

    • src
    • server

    As 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:

    └── 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.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.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:

        "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


    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


    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)

    import counterDuck from 'reducers/counter'
    export default function(req, res, next) {
      // Get store from locals
      const { store } = res.locals
      // Show local resources
      // Dispatch a action to change initial state
      // Resave new store = store
      // Pass middlerware

    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)

    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 = `
          <style id='css-server-side' type="text/css">
            html { margin:0px; padding:0px }
      return {
        prevHtml: html.replace('<head>', `<head>${style}`),
        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)

    import express from 'express'
    import session from 'express-session'
    import { resolve } from 'path'
    export default function(app) {
          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)

    const { override, addWebpackAlias, addBundleVisualizer } = require('customize-cra')
    module.exports = override(
      process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer()


    As soon as you bootstrapped a new project, you have an application running with:

    Under the hood it uses Webpack, Babel, ESLint with a few other plugins enabling a powerful development workflow.

    Known constraints/issues

    Windows Linux Subsystem

    If you're using Windows Linux Subsystem, eslint will not immediatly work. You need to edit the path under .vscode/settings.json. Replace C:/mnt/c with C: and it should work.


    Have a look at

    Code of conduct

    Have a look at


    npm i @crassa/next

    DownloadsWeekly Downloads






    Unpacked Size

    46.4 kB

    Total Files


    Last publish


    • ghondar