Setup of New React Project

By | August 25, 2018

References

Code
Redux tutorial

Dual-Deploy React Project

A dual-deploy project can be served in a NODE HTTP server as well as a SERVLET container such as Tomcat. The only NODE-specific part of the project is the landing page (index.html). The SERVLET container will supply its own landing page.

Sample Project Directory Structure

These instructions assume NPM 5.6.0.

[project-root]
package.json
pom.xml
webpack.config.js
[src]
index.js
App.jsx
App.scss
[public]
index.html

package.json

Contains project description for NPM.
Created with the interactive command

npm init

This file contains the following groups of information

  1. Name and other information which helps identify the project
  2. Run time dependencies
  3. Dev dependencies
  4. NPM scripts

The first 2 are project-specific and the last 2 are not.
Dev dependencies may be broken into categories

  • webpack support (webpack, webpack-cli, webpack-dev-server)
  • babel support (babel-core, babel-loader, bable-preset-env, babel-preset-stage-0, babel-react)
  • css/font support (autoprefixer, css-loader, file-loader, mini-css-extract-plugin, node-sass, postcss-loader, resolve-url-loader, sass-loader, style-loader, url-loader)

Dependencies to 3rd parties are added with the command

npm install -D [pkg-name]

Sharing Local Source

A source directory of a project can be exposed as an NPM dependency for a sibling project. This can be accomplished by defining a name-only package.json in the directory that is to be exposed and manually adding the dependency in the referencing project

“[local-project-name]”: “file:[path-to-local-project]”

If the referenced source needs babel then additional steps are required

  • Babel source directories needs to be included explicitly (you cannot just exclude node_modules)
  • Babel source listings must be physical directories rather than symbolic links from node_modules
  • Alias needs to be created for React to prevent webpack from including multiple copies

pom.xml

Contains project description for MVN. It is needed to

  • Allow MVN initiate NPM build
  • Combine output of NPM build into a servlet resource JAR

Except for the project name this file contains nothing that is specific to a particular project.
Created with the command

mvn archetype:generate -DgroupId=[my-comp] -DartifactId=[my-proj] -DarchetypeArtifactId=maven-archetype-simple
-Dinteractive=false

webpack.config.js

Contains project description for webpack and babel. It is not project-specific except for listing of local sources used by babel.

Leave a Reply

Your email address will not be published. Required fields are marked *