โจ Create React App Server Side Application
๐ A CLI tool to create React + Server Side with one command
Crana
This project is a fork ofyarn global add crassa
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!
yarn dev
This will fire up the backend and the frontend development server. Just edit files under src and see what happens!
Usage
crassa init <projectName> [projectFolderName]
yarn dev
yarn count
yarn lint
yarn start
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.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:
{
"name": "{-- project-name --}",
...
"crassa": {
"displayName": "{-- project-name --}",
"aliases": {
...
}
},
...
"dependencies": {
"crassa": "{-- project-version --}",
...
},
...
}
You can put your git when crassa cli ask you to choose betwee custom or default template, the url mus to have this structure:
ghondar/counter-with-redux-ducks-and-sagas-template
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)
import counterDuck from 'reducers/counter'
export default function(req, res, next) {
// Get store from locals
const { store } = 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)
import { renderToString } from 'react-dom/server'
export const setRenderUniversal = (htmlData, app, store) => {
// store => access to store ( redux )
const renderString = renderToString(app) // wrapping optional
const materialStyle = `
<style id='css-server-side' type="text/css">
html { margin:0px; padding:0px }
</style>
`
return {
prevHtml: html.replace('<head>', `<head>${materialStyle}`),
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: (/config-overrides.js)
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
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.
Contributing
Have a look at CONTRIBUTING.md
Code of conduct
Have a look at CODE_OF_CONDUCT.md