Skip to content

Node.js Express React 4 Single Page App Starter Template with Bootstrap

Notifications You must be signed in to change notification settings

primaryobjects/Node.js-React-Starter-Template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Node.js Bootstrap Express React Starter Template

A quick and easy Node.js + Express + React template project, using Twitter Bootstrap 5.0 and React Router for creating a simple single page application.

Also available for Pug.

Node.js React, React Router, Twitter Bootstrap template screenshot.

Usage

  • Clone repository.
  • Open a command prompt, navigate to the folder, and enter: npm install
  • Navigate to the folder client and enter: npm install
  • Next, run a build of the React client by entering: npm run build
  • Launch the node server by navigating to the root folder and entering: npm start
  • Browse to http://localhost:3000

Development Usage

  • Navigate to the folder client and enter: npm start

    This will run the React client app.

    You can make changes to the pages in /client/src/components and see them update live.

Legacy OpenSSL Provider

If you receive an error: export NODE_OPTIONS=--openssl-legacy-provider use the following steps:

  • Linux
export NODE_OPTIONS=--openssl-legacy-provider
  • Windows
set NODE_OPTIONS=--openssl-legacy-provider
  • PowerShell
$env:NODE_OPTIONS = "--openssl-legacy-provider"

Contents:

  • client/src/index.js
  • client/src/App.js
  • client/src/components/Header/index.js
  • client/src/components/Footer/index.js
  • client/src/components/Home/index.js
  • client/src/components/About/index.js
  • client/src/components/Contact/index.js
  • client/src/components/NotFound/index.js

Editing Pages:

Edit client/src/components/Home/index.js to add your content to the Home page. The default contents include:

class Home extends Component {
  render() {
    return (
      <>
        <h1>Home</h1>
        <p>Home</p>
      </>
    )
  }
}

Author

Kory Becker http://www.primaryobjects.com/kory-becker