@stella1013/ts-boilerplate v1.0.1

TypeScript/Webpack Project

How to develop the app

Initialize the environment

1. Clone the repository:

git clone 'FROM WHATEVER REPOSITORY'

2. Install the dependencies:

npm install

Launch the app

1. Run the development server:

npm run start

2. Open localhost:8080 to see the live app.

Document the app Use JSDocs to document your code and Documentation folder and files will be auto generated. 1. Run the Generate Documentation Script:

npm run documentation

2. Open documentation folder to see html files of documentation.

Optimize!

1. Apply an optimization.

Note: if you’re applying an optimization in the webpack config, it’s a good practice to apply it only for production builds. Optimizations slow down the build, which is undesirable during development.

To apply an optimization in the production mode, do something like this:

// webpack.config.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  /* ... */
  plugins: [
    // Common plugins
  ].concat(
    isProduction
      ? [
          // A plugin that optimizes something in production
        ]
      : [],
  ),
};

2. Run the production build to see if this change affects the size:

npm run build

3. If you’re editing CSS/Stylesheets run Watch mode to generate new 'style.css' file with your changes:

npm run watch:sass

4. Test Runner:

npm run test

What’s in the repo

This repo includes the source code of Bioscape Digital. The app has the following structure:

helpers         // Console helpers *for you* that validate
                // a few things during the build.
                // Just don’t care about them.

dist          // Static public files (HTML and CSS files)
|- build       // Results of the webpack build (JS and SVG files)
scss       // Files to edit CSS Stylesheets
src
|- api         // The API module that makes requests to GitHub API
|- components  // Components that get rendered into the page.
               // Just plain JS, no frameworks (see “How components work”
               // below for additional info)
|- templates   // Templates of HTML pages
|- utils       // Additional utilities

|- App.ts    // The entry point. Renders the application
.gitignore
.babelrc
index.html
Jest.config.js
package.json
package-lock.json
README.md
style.css // Auto Generated file. Do not make edits here. They will be overwritten.
tsconfig.json
webpack.config.js // ↑ The webpack config file
webpack.config.prod.js // Webpack config file for production

How components work

Bioscape Digital is built using components, where each component renders a widget on a screen (possibly calling child components).

A component is a plain function that accepts a target (a node where it must be rendered) and a data object to use when rendering the component (e.g. a username). The data argument is optional:

const component = (/** HTMLElement */ target, /**Object */ data) => {
  // Render a component
};

A simple component might look like this:

// Will render <p>User <username></p> into the target
const component = (target, { username }) => {
  const content = document.createElement('div');
  content.innerHTML = `<p>User ${username}</p>`;
  target.appendChild(content);
};

component(document.querySelector('#root'), {
  username: 'john-smith',
});

A component could do anything inside itself – from calling other components to setting up event listeners.