Skip to content

Commit 6f8562c

Browse files
scriptmasterscriptmaster
committed
Initial commit
0 parents  commit 6f8562c

File tree

10 files changed

+22624
-0
lines changed

10 files changed

+22624
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
.DS_STORE
3+
.idea
4+
npm-debug.log

‎README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Server and Browser Rendering Starter template for React projects
2+
3+
That's right. Start off with a proper starter template to have both server and browser rendering features from your application react components.
4+
5+
6+
### All applications in src/app
7+
8+
All components shared/renderd in browser and server are in src/app
9+
10+
Take a look into src/browser.js and src/server.js for the differences and initial props you can provide to <App /> component.
11+
12+
13+
## Starting development server
14+
15+
After cloning this repo, install package dependencies with `npm i`
16+
17+
Install global packages: `npm i -g babel-cli webpack webpack-dev-server`
18+
19+
Start the development server with
20+
21+
`npm run dev`
22+
23+
This starts the server with --hot code replacement using webpack-dev-server
24+
25+
Code, Save and the browser renders your components immediately.
26+
27+
## Running server in production
28+
29+
Ensure package dependencies and global packages are installed.
30+
31+
Then, simply:
32+
33+
`npm start`
34+
35+
36+
## No external scripts
37+
38+
No complicated hard to understand scripts.
39+
40+
41+
## Why no TypeScript?
42+
43+
I was trying to setup a simple development server for react with both server and client side rendering and typescript threw a lot of roadblocking errors in compilation, even though I used the right .ts, .tsx extensions and ts-loader version. This is the quickest I could create.
44+
45+
46+
# Disclaimer
47+
48+
Starter template created from scratch and written by Mohammed Sheriff. All the lines of this readme and the starter template code are written by Sheriff with understandings from how React, ES6, Babel, Webpack and NodeJS can work together, except package.json and auto-generated files. No copy paste as most of you would expect/underestimate. You are free to use it, if you like it.

‎package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "react-server",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "src/browser.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"start": "npm run build && babel-node src/server",
9+
"dev": "webpack-dev-server --hot",
10+
"build": "webpack && echo \"\n\n\nInstall missing packages with npm i\n\n\n\n\""
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "ISC",
15+
"devDependencies": {
16+
"babel-cli": "^6.26.0",
17+
"babel-core": "^6.26.0",
18+
"babel-loader": "^7.1.2",
19+
"babel-preset-env": "^1.6.0",
20+
"babel-preset-es2015": "^6.24.1",
21+
"babel-preset-react": "^6.24.1",
22+
"webpack": "^3.5.6",
23+
"webpack-dev-server": "^2.7.1"
24+
},
25+
"dependencies": {
26+
"express": "^4.15.4",
27+
"react": "^15.6.1",
28+
"react-dom": "^15.6.1"
29+
}
30+
}

‎public/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>React Blog</title>
8+
</head>
9+
<body>
10+
<!-- #root will be either rendered on server or on browser -->
11+
<div id="root"></div>
12+
13+
<script src="/static/app.bundle.js"></script>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)