Skip to content
This repository was archived by the owner on Apr 11, 2019. It is now read-only.

Commit 5ac156a

Browse files
RyanCCollinsRyanCCollins
committed
Feat: add production server and setup / configuration
Note: reference the README.md file for setup details
1 parent ef52f2b commit 5ac156a

File tree

9 files changed

+272
-81
lines changed

9 files changed

+272
-81
lines changed

‎README.md‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,16 @@ To try the example application out or to use the project, follow the instruction
3535

3636
npm run start
3737

38-
Development server should be running at http://localhost:8080/
38+
Your app will be served at: http://0.0.0.0:1337/
3939

40-
4. **Make build**
40+
## Deployment
41+
In order to deploy the app, a demo express server setup has been included. If you peak inside the server folder, you will see an example setup. The public folder includes all of the files that are generated when running the: `npm run deploy` script. This includes the bundle.js, index.html and an app folder that includes all assets.
4142

42-
npm run build
43+
The express server can be run with `npm run serve:bundle`. This will start a static express server and serve the generated assets, just like you would in production.
4344

44-
### File Structure
45+
NOTE: the deployment script will place all your generated assets in the `server/public` folder, where they can be served in production.
46+
47+
## File Structure
4548
* Some files left out for brevity. Please reference the files in the [Scalable React Boilerplate](https://github.com/RyanCCollins/feature-first-react-boilerplate) project for an example of the file structure. The application will ultimately be in use in a production web application project and more info will be posted here when we have production level examples.
4649
```
4750
.
@@ -88,30 +91,31 @@ To try the example application out or to use the project, follow the instruction
8891

8992
## Scripts
9093
- **npm run setup**
91-
92-
Installs the application's dependencies
94+
+ Installs the application's dependencies
9395

9496
- **npm run test**
97+
+ Runs unit tests
9598

96-
Runs unit tests
9799
- **npm run test:watch**
100+
+ Watches for changes to run unit tests
98101

99-
Watches for changes to run unit tests
100102
- **npm run build**
103+
+ Bundles the application
101104

102-
Bundles the application
103105
- **npm run dev**
106+
+ Starts webpack development server
104107

105-
Starts webpack development server
106108
- **npm run lint**
109+
+ Runs the linter
107110

108-
Runs the linter
109111
- **npm run deploy**
112+
+ Creates the production ready files within the `/server/public` folder
110113

111-
Creates the production ready files
112114
- **npm run clean**
115+
+ Removes the bundled code and the production ready files
113116

114-
Removes the bundled code and the production ready files
117+
- **npm run serve:bundle**
118+
+ Serve production assets from the `/server/public` folder.
115119

116120
## Generators
117121
The boilerplate contains generators for easy project scaffolding. At the moment, the generator has the following scaffold generating commands built in:
@@ -150,7 +154,7 @@ where <type_of_component> is one of: component, container or page.
150154

151155
The generators use the same feature-first file organization as the rest of the project, encapsulating components within their own folder.
152156

153-
#### **Gotchas**
157+
### **Gotchas**
154158
In order to get the import / export to work, the generator does some pattern matching of the comments in the files to place the new imports. Just don't delete the comments within the root level index.js file in each directory and things will work fine!
155159

156160
From `app/src/container/index.js` or `app/src/component/index.js`
@@ -221,6 +225,8 @@ which will pick up any file with the .test.js postfix and run it through Karma /
221225
* [x] Add [Grommet](grommet.io) as an optional starter component library
222226
* [x] Add Webpack stats plugin
223227
* [x] Dogfood the project and iterate on suggestions
228+
* [x] Setup production server configuration
229+
* [ ] Add Jest as testing utility
224230
* [ ] Create Docker container & automation scripts
225231
* [ ] Write wiki / other documentation
226232

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<!doctype html>
2+
<!doctype html>
23
<html lang="en">
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv=X-UA-Compatible content="IE=edge">
67
<meta name=viewport content="width=device-width,initial-scale=1">
78
<title>Scalable React Boilerplate</title>
8-
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
99
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,300,700|Lato:400,300,700' rel='stylesheet' type='text/css'>
1010
</head>
1111
<body>

‎server/app.js‎

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,19 @@
11
/* eslint-disable */
22
const isDeveloping = process.env.NODE_ENV !== 'production';
3-
const port = isDeveloping ? 8016 : process.env.PORT;
3+
const port = isDeveloping ? 1337 : process.env.PORT;
44
const path = require('path');
55
const express = require('express');
66
const app = express();
77

8-
if (isDeveloping) {
9-
const webpack = require('webpack');
10-
const webpackMiddleware = require('webpack-dev-middleware');
11-
const webpackHotMiddleware = require('webpack-hot-middleware');
12-
const config = require('../webpack.config.babel.js');
13-
const compiler = webpack(config);
14-
const middleware = webpackMiddleware(compiler, {
15-
publicPath: config.output.publicPath,
16-
contentBase: 'src',
17-
stats: {
18-
colors: true,
19-
hash: false,
20-
timings: true,
21-
chunks: false,
22-
chunkModules: false,
23-
modules: false
24-
}
25-
});
26-
app.use(middleware);
27-
app.use(webpackHotMiddleware(compiler));
28-
app.get('*', (req, res) => {
29-
res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'public/index.html')));
30-
res.end();
31-
});
32-
} else {
33-
app.use(express.static(__dirname + '/public'));
34-
app.get('*', (req, res) => {
35-
res.sendFile(path.join(__dirname, 'public/index.html'));
36-
});
37-
}
8+
app.use(express.static(__dirname + '/public'));
9+
app.get('*', (req, res) => {
10+
res.sendFile(path.join(__dirname, 'public/index.html'));
11+
});
3812

3913
app.listen(port, '0.0.0.0', (err) => {
4014
if (err) {
41-
console.warn(err)
15+
return console.warn(err);
4216
}
43-
console.info('==> 🌎 Listening on port %s. Open up http://0.0.0.0:%s/ in your browser.', port, port);
17+
return console.info(`==> 😎 Listening on port ${port}. Open http://0.0.0.0:${port}/ in your browser.`);
4418
});
4519
/* eslint-enable */

‎server/deploy.py‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎server/public/app/src/components/Navbar/logo.00e7c4cf372ade679404a6cf8f80704f.png‎

11 KB
Loading

‎server/public/bundle.js‎

Lines changed: 37 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎server/public/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<!doctype html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv=X-UA-Compatible content="IE=edge">
7+
<meta name=viewport content="width=device-width,initial-scale=1">
8+
<title>Scalable React Boilerplate</title>
9+
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,300,700|Lato:400,300,700' rel='stylesheet' type='text/css'>
10+
</head>
11+
<body>
12+
<!-- The app will bootstrap into this div -->
13+
<div id="app"></div>
14+
<script src="/app/build/bundle.js"></script>
15+
<script type="text/javascript" src="/bundle.js"></script></body>
16+
</html>

‎server/public/stats.html‎

Lines changed: 189 additions & 0 deletions
Large diffs are not rendered by default.

‎webpack.config.babel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Visualizer from 'webpack-visualizer-plugin';
66
const ROOT_PATH = path.resolve(__dirname);
77

88
const env = process.env.NODE_ENV || 'development';
9-
const PORT = process.env.PORT || 8080;
9+
const PORT = process.env.PORT || 1337;
1010
const HOST = '0.0.0.0'; // Set to localhost if need be.
1111

1212
module.exports = {
@@ -76,7 +76,7 @@ module.exports = {
7676
},
7777
},
7878
output: {
79-
path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'app/dist') : path.resolve(ROOT_PATH, 'app/build'),
79+
path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'server/public') : path.resolve(ROOT_PATH, 'app/build'),
8080
publicPath: '/',
8181
filename: 'bundle.js',
8282
},

0 commit comments

Comments
 (0)