tutorial-react-parcel-express
tutorial-react-parcel-express copied to clipboard
Published
20 hours ago •
witchard
witchard
A tiny getting started for a react project, with front-end built with parcel, and served through express.
Tutorial - express / parcel / react
ARCHIVED AS NO LONGER MAINTAINING
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:
"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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hi</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
Client Javascript
Put in client/index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById('root')
);
Server Javascript
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!'))
Development with auto reloading
-
npm run dev - Visit http://localhost:3000
- Change some files!
Run
-
npm start - Visit http://localhost:3000
witchard