ARCHIVED AS NO LONGER MAINTAINING
A tiny getting started for a react project, with front-end built with parcel, and served through express.
npm init -y
npm install parcel-bundler nodemon concurrently --save-dev
npm install react react-dom express --save
- Add to scripts in package.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",
Put in client/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hi</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
Put in client/index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById('root')
);
Put in server/index.js
const express = require('express')
const app = express()
app.use(express.static('dist'))
app.listen(3000, () => console.log('Listening on port 3000!'))
npm run dev
- Visit http://localhost:3000
- Change some files!
npm start
- Visit http://localhost:3000