README
!!!DEPRECATED!!! slush-react-express
Deprecated
slush-react-express has been deprecated in favor of the create-react-app CLI. If you want to scaffold TypeScript projects, support this issue.
slush-react-express
Changelog
Click here to see recent changes.
Requirements
Since the generated plain-JavaScript projects are written in ES6 you need to have node v4 or higher and npm v3 or higher for TypeScript projects.
Installation
Install slush-react-express globally:
npm install -g slush-react-express
Remember to install slush globally as well, if you haven't already:
npm install -g slush
Usage
Create a new folder for your project. Alternatively, you can also let slush-react-express create a new folder for you automatically.
mkdir my-react-express-app
cd my-react-express-app
Run the generator:
slush react-express
You will now be prompted to give your new React/Express app a name, which will be dasherized and used in its package.json file. The chosen name will be used within the server's route and react component as well.
The generator supplies two templates: A minimal template and a full template which includes advanced parts such as gulp builds, tests and more.
Minimal Template
The minimal template is the quickest way to get started with your React/Express app, and only includes the minimum files that are required to get you started. React (.jsx) files are compiled on the fly in the browser, which means that you don't have to compile them yourself.
Project structure
my-react-express-app/
├── .gitignore
├── package.json
├── server.js # Main node entry point
└── public
├── javascripts
├── main.jsx # Main react component and entry point
└── vendor # Vendor folder for babel and React
├── stylesheets
└── index.css # Main app stylesheet
└── index.html # Main browser entry point
Running the project
You can start your app by running:
npm start
Then head to http://localhost:3000 in your browser.
Full Template
The full template is a great starting point if you want to kickstart a big project with an advanced build system.
Features
- No builds required during development! No matter whether you use plain JavaScript, Babel or TypeScript. You will never have to compile during development because everything is compiled on the fly!
- Automatic server reloading and hot-reloading of the browser on file changes
- Production builds with minified/stripped files
- TypeScript support
- SASS support
- Sourcemaps support
Project structure
my-react-express-app/
├── .gitignore
├── package.json
├── gulpconfig.js/ts # Easy gulpfile configuration
├── gulpfile.js/ts # See gulp section below
├── (tsconfig.json) # Typescript only - compile options for typescript
├── src
├── client # Client side files go here
├── app # Script files
├── config.js # Configuration file for jspm
├── index.js/tsx # Main entry point (TypeScript file in src/)
├── (typings.json) # Typescript only - type information for typescript
├── view
├── NameLoader.js/tsx # Sample react stateful component (TypeScript file in src/)
└── NameLoaderView.js/tsx # Sample react stateless component (TypeScript file in src/)
└── style
└── index.css/scss # Main app stylesheet
└── static # Static files
├── index.html # Main browser entry point
└── favicon.ico
└── server # Server side files go here
├── route # Express routes go here
└── index.js/ts # Sample route
├── lib #
└── error-message.js/ts # Class that describes a server error
├── view # Express routes go here
├── error.js/ts # Error React component
└── layout.js/ts # Layout React component to generate valid HTML
├── app.js/ts # Express app definition
└── server.js/ts # Main node entry point
└── test # Mocha tests go here
├── client # Client side tests
├── util
└── Wrapper.js/tsx # React wrapper for stateless components
├── NameLoader-test.js/tsx # Sample tests for the NameLoader component
└── NameLoaderView-test.js/tsx # Sample tests for the NameLoaderView component
└── server # Server side tests
├── util
└── address.js/ts # Sample test util
├── appname.js/ts # Sample test
└── listening.js/ts # Sample test
Styling
You can choose to use SASS or plain CSS for the styling in your project.
Typescript
You can choose between TypeScript and Javascript. React components will be written in .tsx files if you choose to use TypeScript.
Running the project
Make sure gulp is installed globally:
npm install -g gulp
You can start your app by running:
gulp watch
Then head to http://localhost:3000 in your browser. The server will automatically restart whenever a server file changes and any client side modification will be hot-reloaded without reloading the browser!
Gulpfile
Builds
Builds copy/compile & bundle all your code, put it into a destination folder and run all tests for you. A production build can be triggered by running:
gulp
# same as running "gulp test"
During development, everything can be automated by watching over your source files. The server will be restarted if server side code changes and the browser modules will be hot-reloaded in case any client side code changes. This means that you don't even have to reload the browser to see your changes! You can start watching over your files by running:
gulp watch
Tests
To run tests run:
gulp test
By default, the test task will run a full build. To run tests without going through the build process you can run the following command: (Currently JavaScript only)
npm test
License
MIT