basic-web-app

basic-web-app is a ~~basic~~ isomorphic web app code to start a project using React.js, Sass, Node.js, Express, Jest, TSLint, React Router and Webpack.

Summary

• Installation
• Quick start
• Features
• FAQ
• Contributing
• Special thanks

Installation

Fork it

To start your project, fork this one from the github page. You can also mirror it to another repository if you would like to keep being updated by the original one. Check this Github documentation on repository duplication and mirroring for more information.

Change it

Now that you have your own copy of the code, you should customize it by editing the following files:

• README.md: The edition depends on you.
• CHANGELOG.md: It should be empty.
• .gitignore: Remove the ttous.md line.
• package.json: You can change the name, version, description, author, homepage, repository and bugs properties.

Yarn it

After the app was put in your Github repository, you can install it locally as follow:

git clone https://github.com/<your_username>/basic-web-app
cd basic-web-app
yarn             # or 'npm i'

That's it!

You can finally start developing! No further configuration is needed: basic-web-app is intended to allow you to start coding as soon as it is installed.

Quick start

Development

Test

yarn dev_test    # or 'npm run dev_test'

Start

yarn dev_build   # or 'npm run dev_build' (necessary only for the first run)
yarn dev         # or 'npm run dev'

Production

Test

To launch the tests, run:

yarn test        # or 'npm test'

Start

For your production, simply run:

yarn start       # or 'npm start'

Happy coding!

Features

basic-web-app implements a lot of features already put together for you to skip the ~~boring~~ configuration and go directly to the fun part!

• React.js for the frontend.
• Sass for the style.
• Node.js for the backend.
• TSLint for the code.
• Express for the server.
• React Router for the routing.
• Jest for the tests.
• Webpack for the unity.

FAQ

How can I use client-side global variables window and document?

In order to use client-only variables, you must check whether they are defined before using them. In order to do so, you can use the following technique:

// At the beginning of your file
const globalAsAny = (global as any);

// ...

// When you need to use the global variables
if (globalAsAny.window) { // or 'if (globalAsAny.document)'
    // ...
}

Contributing

Contributions are very welcome! Please check out the Code of Conduct before making your pull requests.

Special thanks

• Thanks to crsandeep and his repository (simple-react-full-stack) on which this one is based on.
• Thanks to Alligator.io and their article about React routing: Using React Router 4 with Server-Side Rendering.
• Thanks to Soon Hin Khor and his article about full-stack Webpack configuration: Webpack Javascript Bundling for Both Front-end and Back-end (nodejs).