Giter Club home page Giter Club logo

ps's Introduction

React Boilerplate - with JSX

License: GPL v3 David

An express.js server with additional tooling set up for react.js. Ideal for starting off a personal project, or a hackathon just right

Setup

Install the dependencies. This is done with yarn (recommended), or plain ol' npm install (also pretty good).

React

React is set up under src/client with react-router-4 for client-side routing.

  • An example router is setup under src/client/router.jsx
  • A default layout is setup under src/client/components/layout.jsx
  • Pages can be found under src/client/components/pages
  • Webpack is setup to resolve files with the following extensions:
    • .jsx
    • .js
    • .css
    • .json
    • Files with these extensions can be imported as import { x } from './myFile' and webpack will worry about the extension.

Scripts

Running the server

This is an express server, with the HTTP server exposed (under bin/www). You can easily swap this out for a HTTPS server and include your certificates. Running the app is simple:

  • npm start

Heroku

If you're deploying to Heroku - a Procfile is setup for you. Use heroku local. The package local-env-var is included to load from your .env.

Building

Because we're using React with JSX, the JSX has to be built. A polyfill (set up to ie >= 11) is provided.

  • npm build

If you want to keep building after a file's saved:

  • npm run watch

Note: This boilerplate includes a service worker, setup to cache the bundle and index file.

To ensure that you can view your changes, in the developer console, go to application, click 'service workers' and select 'bypass for network'.

The code for the worker is under public/javascripts/worker.js.

I've cloned this from git, how do I attach it to my own?

  1. Remove the .git folder - npm run clean
  2. Initialise the folder as a git repository - git init
  3. Remotely add your repo - git remote add origin ${path-to-git-repo}
  4. Push! git push -u origin master

ps's People

Contributors

hjfitz avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.