https://github.com/kwhitley/parcel-playground
https://github.com/kwhitley/parcel-playground
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kwhitley/parcel-playground
- Owner: kwhitley
- License: mit
- Created: 2019-11-04T20:12:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T00:07:28.000Z (over 2 years ago)
- Last Synced: 2024-04-14T07:11:28.519Z (about 1 year ago)
- Language: JavaScript
- Size: 1.92 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tutorial - express / parcel / react
A tiny getting started for a react project, with front-end built with parcel, and served through express.
## Setup project
* `npm init -y`
* `npm install parcel-bundler nodemon concurrently --save-dev`
* `npm install react react-dom express --save`
* Add to scripts in package.json:
```json
"build-watch": "parcel watch ./client/index.html",
"start-watch": "nodemon server/index.js",
"dev": "concurrently --kill-others \"npm run start-watch\" \"npm run build-watch\"",
"build": "parcel build ./client/index.html",
"start": "npm run build && node server/index.js",
```
## Html
Put in `client/index.html`
```html
Hi
```
## Client Javascript
Put in `client/index.js`
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hello World!
,
document.getElementById('root')
);
```
## Server Javascript
Put in `server/index.js`
```javascript
const express = require('express')
const app = express()
app.use(express.static('dist'))
app.listen(3000, () => console.log('Listening on port 3000!'))
```
## Development with auto reloading
* `npm run dev`
* Visit http://localhost:3000
* Change some files!
## Run
* `npm start`
* Visit http://localhost:3000