This repo contains example client-server application with basic JWT authorization. It is written in Typescript2. Please note, that this application is only an example, has rather unsophisticated views and still some TODOs ;) I will maintain the application and probably add some new features in the future. I implemented example resource view on the client side, which is available only after user's successful authorization. It shows youtube videos with basic input search.

NOTE: It uses youtube API with some limited API key (no of queries per hour/day), so there might be situation, when videos would not load.

Client side uses following:

Features/Technologies

• TypeScript v2 - "typed superset of JavaScript that compiles to plain JavaScript"
• TSLint- An extensible linter for the TypeScript language.
• SPA - Single Page Application, with fully client side rendering
• Shared app config between development and production
• Splits vendors from client bundle
• Client & Server are two separate applications and you should treat them as such. They have their own package.json files and npm scripts. They are just in a single repository. They are running at different ports.
• CORS handled in development mode using webpack's Proxy

Client side uses following technologies/packages:

• React- for rendering
• React Hot Loader v3- "Tweak React components in real time"
• React Router v4- for routing
• Redux- "Redux evolves the ideas of Flux implementation, but avoids its complexity..."
• ReduxForm v6 - "The best way to manage your form state in Redux"
• Redux Devtools Extension for next generation developer experience.
• redux-thunk- allowing to write asynchronous action creators
• Webpack v2- for bundling (with asset-management, "Tree-Shaking", hot-module-replacement, caching and code-splitting)
• Sass- "css with superpowers"
• Stylelint - style linter

Server side uses following technologies/packages:

• node v8
• nodemon- configured with ts-node to automatically rebuild and restart the server on any changes
• Express v4 server.
• mongoose- "elegant mongodb object modeling for node.js"
• passport- Simple, unobtrusive authentication for Node.js

Why the project is useful?

Setting whole configuration for many different packages from scratch can be painful and time-consuming. This repository can be treated as an example of such configuration. It contains configuration for both client & server applications , for development as well as production. It presents how to configure basic jwt authorization with code on the client and the server. I hope it will save you some time and gray hairs ;)

Get started

1. Clone the repository to your local machine:

git clone https://github.com/BGrzegorczuk/react-redux-express-auth-ts.git
cd react-redux-express-auth-ts

2. Install client app dependencies:

cd client
npm i

3. Run client app in development mode:

npm run develop

4. Install server app dependencies:

Open project's root directory (react-redux-express-auth-ts/) in another console tab, then:

cd server
npm i

3. Run server in development mode:

npm run develop

You should be able to run the application at http://localhost:3000/.