react-redux-scaffold

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

react-redux-scaffold

★ 12 Open GitHub ↗

A scaffold project with node express redux react

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-redux-scaffold

## TLTR
A React/Redux scaffold project with a nodeJs server and a babel/browserify building system.

** requires node > 5.x **

# Quick Start

### Just to check that everything is working
```
# Install the node dependencies
npm install

# Bundle the client code
npm run build

# Run the node server
npm start

# Open the web browser at http://localhost:5000
# You should then see a sample 'bootstrap' app
```

### Ok, is working but... I want to start to write my code ASAP

Everything you need to start to do some experiment and start to write your react app is:

##### Run the server 
Open a terminal and in the app folder run:

```npm start```

##### Run the watcher
Open another terminal and in the app folder

```gulp watch```

##### Open your browser at http://localhost:5000
And you should see a sample boostrap app with a "Edit me!!" title in the center of the page.

##### Edit the code
 * Open your preferred IDE and start to open the ```client``` folder.
 * Open the `client/components/pages/home.js` file.
 * Change the `<h1>Edit me!!</h1>` text in something different.
 * Check the browser (the content should automatically refresh)

##### Have a lot of fun!!

# The project explained

The project is built using many technologies.

* Server. Is a simple nodeJs/express app that just serves the index file that load the client app. It could be used as well as a complete server app, adding all the features needed.
 * Client. Is a redux/react-router/react basic app. It uses ```qwest``` module as a Ajax library and `react-bootstrap` module as a front-end component framework.
 * Conf. The configuration is managed by the `platform-config` and the `service-config` modules.
 * Gulp tasks. The Gulp task are managed by the `gulp-commonjs-tasks` module, that allow keep the tasks clean and easy to mantain.
 * Test. The test environment is built using mocha.
 * Bundle. The bundle is made using a browserify/babel workflow that provide react hot reloading.

### File and folder structure

```
.
+-- client         // React App
|   +-- ...
+-- conf           // System configration
|   +-- platforms  // production/development/etc..
|       +-- ...
|   +-- services   // Additional services configuration
|       +-- ...
+-- public         // Public folder, static files
+-- server         // NodeJs App
|   +-- ...
+-- tasks          // Gulp tasks
|   +-- ...
+-- tests          // Common test files
|   +-- helpers
|       +-- ...
+-- index.js       // NodeJS entry point
+-- Gulpfile.js    // Gulp entrypoint
+-- .babelrc       // Babel config file
+-- .editornconfig // Editor config file
+-- .eslintrc      // Eslint config file
+-- README.md      // This file

```

## Build your bundle
The development enviroment uses browserify to build the bundle. At the end of the process the client files are copied in the ```public``` folder.

* main.js (Contains the app)
 * build.js (Contains all the external libs)
 * styles.css (Contains all the styles)

#### Start the dev watch/build

To start the watch task just run:

```
gulp watch
```
The task run a build process and enable the watcher. The task is run by default in `development` mode and add a `react-transform-hmr` transform to the babel bundle process for the hot reloading process. 
The build file doesn't work if the watcher is down. 
To build a no/watcher version run ```npm run build``` that simply uses the `production` environment and doesn't add the hot reload features to the code.

#### Environments

There are currently configured 2 environment:

* production
 * development (default)

To set the environment just add NODE_ENV=some_env before the commands.

Eg. For the production building of the client
```
NODE_ENV=production gulp build
```
##### Production
 * the client is uglified
 * the client doesn't require the watcher to run, hot reloader is disabled

##### Development
 * the client is not uglified
 * the client require the watcher to run, hot reloader is enabled

The environments could be changed in the `config/platforms/targets` folder.
 
 * folders/build (The public folder location)
 * build/uglify (The uglify params, not uglified if missing)

The babel parameters could be changed in the `.babelrc` file.

## Config
The config is defined in th `config` folder.

The app uses the node modules `platform-config` (https://github.com/sytac/platform-config)

```
  // The data related to the application
  app: {
    name: 'Some application name',
    title: 'Some application title'
  },
  // The server data used in node/express
  server: {
    port: 5000
  },
  // The folder containing the static files
  folders: {
    build: path.join(__dirname, '../../../public')
  },
  // The build/bundle parameter
  build: {
    uglify: {
      global: true,
      sourcemap: false,
      mangle: true,
      compress: true
    }
  },
  // Additional services
  services: {
    html: {
      // The list of -link- tags added to the index.html server file 
      links: [
        {
          rel: 'stylesheet',
          crossorigin: 'anonymous',
          href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
          integrity: 'sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7'
        },
        { rel: 'stylesheet', type: 'text/css', href: '/styles.css' }
      ],
      // The list of -scripts- tags added to the index.html server file
      scripts: [
        { type: 'text/javascript', src: '/main.js' }
      ]
    }
  }
```

## Gulp / Bundle
All the automation are created using Gulp with the task manager module `gulp-commonjs-tasks` (https://github.com/sytac/gulp-commonjs-tasks)

The tasks are placed in `tasks` folder.

Run `gulp help` to see le list of the tasks.

* build Bundle the client package and copy it in the public folder. Run 'npm run build' to prepare a production environment.
* eslint Run linting on the project sources.
* mocha Run the unit test.
* watch Build the sources and run the watcher with hot reload features.

react-redux-scaffold

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README