├── client
├── index.js
└── index.html
├── server
└── index.js
├── LICENSE
├── .gitignore
├── package.json
└── README.md
/client/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | ReactDOM.render(
5 | Hello World!
,
6 | document.getElementById('root')
7 | );
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const app = express()
3 |
4 | app.use(express.static('dist'))
5 |
6 | app.listen(3000, () => console.log('Listening on port 3000!'))
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Hi
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 witchard
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 | .cache
45 |
46 | # Optional eslint cache
47 | .eslintcache
48 |
49 | # Optional REPL history
50 | .node_repl_history
51 |
52 | # Output of 'npm pack'
53 | *.tgz
54 |
55 | # Yarn Integrity file
56 | .yarn-integrity
57 |
58 | # dotenv environment variables file
59 | .env
60 |
61 | # dist
62 | dist
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tutorial-react-parcel-express",
3 | "version": "1.0.0",
4 | "description": "A tiny getting started for a react project, with front-end built with parcel, and served through express.",
5 | "main": "index.js",
6 | "scripts": {
7 | "build-watch": "parcel watch ./client/index.html",
8 | "start-watch": "nodemon server/index.js",
9 | "dev": "concurrently --kill-others \"npm run start-watch\" \"npm run build-watch\"",
10 | "build": "parcel build ./client/index.html",
11 | "start": "npm run build && node server/index.js",
12 | "test": "echo \"Error: no test specified\" && exit 1"
13 | },
14 | "keywords": [
15 | "tutorial",
16 | "react",
17 | "parcel",
18 | "express"
19 | ],
20 | "author": "witchard",
21 | "license": "MIT",
22 | "repository": {
23 | "type": "git",
24 | "url": "git+https://github.com/witchard/tutorial-react-parcel-express.git"
25 | },
26 | "devDependencies": {
27 | "concurrently": "*",
28 | "nodemon": "*",
29 | "parcel-bundler": "*"
30 | },
31 | "dependencies": {
32 | "express": "*",
33 | "react": "*",
34 | "react-dom": "*"
35 | },
36 | "bugs": {
37 | "url": "https://github.com/witchard/tutorial-react-parcel-express/issues"
38 | },
39 | "homepage": "https://github.com/witchard/tutorial-react-parcel-express#readme"
40 | }
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tutorial - express / parcel / react
2 |
3 | ARCHIVED AS NO LONGER MAINTAINING
4 |
5 | A tiny getting started for a react project, with front-end built with parcel, and served through express.
6 |
7 | ## Setup project
8 |
9 | * `npm init -y`
10 | * `npm install parcel-bundler nodemon concurrently --save-dev`
11 | * `npm install react react-dom express --save`
12 | * Add to scripts in package.json:
13 |
14 | ```json
15 | "build-watch": "parcel watch ./client/index.html",
16 | "start-watch": "nodemon server/index.js",
17 | "dev": "concurrently --kill-others \"npm run start-watch\" \"npm run build-watch\"",
18 | "build": "parcel build ./client/index.html",
19 | "start": "npm run build && node server/index.js",
20 | ```
21 |
22 | ## Html
23 |
24 | Put in `client/index.html`
25 |
26 | ```html
27 |
28 |
29 |
30 | Hi
31 |
32 |
33 |
34 |
35 |
36 |
37 | ```
38 |
39 | ## Client Javascript
40 |
41 | Put in `client/index.js`
42 |
43 | ```javascript
44 | import React from 'react';
45 | import ReactDOM from 'react-dom';
46 |
47 | ReactDOM.render(
48 | Hello World!
,
49 | document.getElementById('root')
50 | );
51 | ```
52 |
53 | ## Server Javascript
54 |
55 | Put in `server/index.js`
56 |
57 | ```javascript
58 | const express = require('express')
59 | const app = express()
60 |
61 | app.use(express.static('dist'))
62 |
63 | app.listen(3000, () => console.log('Listening on port 3000!'))
64 | ```
65 |
66 | ## Development with auto reloading
67 |
68 | * `npm run dev`
69 | * Visit http://localhost:3000
70 | * Change some files!
71 |
72 | ## Run
73 |
74 | * `npm start`
75 | * Visit http://localhost:3000
76 |
--------------------------------------------------------------------------------