Webpack installation

Start by creating a new project using NPM with Webpack and other related dependencies. We're installing dependencies for a simple project using Typescript with ts-loader in the following example.

Dependencies may vary based on the project setup. For example, you might use babel-loader instead of ts-loader if you don't use Typescript.

mkdir my-reshaped-app
cd my-reshaped-app
npm install react react-dom
npm install --dev webpack webpack-cli webpack-dev-server css-loader postcss-loader mini-css-extract-plugin ts-loader typescript html-webpack-plugin @types/react @types/react-dom

Download the latest Reshaped release from the Releases page and save the .tgz file into your project. Then install the package using the file path. For example, if you save the package as ./vendor/reshaped.tgz in the project root folder, you can run:

// npm
npm install ./vendor/reshaped.tgz

// yarn
yarn add ./vendor/reshaped.tgz

Import PostCSS config from Reshaped and add it to postcss.config.js file in the root folder:

const postcss = require("reshaped/postcss");
module.exports = postcss.config;

Add all installed Webpack loaders to your Webpack config and set up the config options based on your needs. You can find an example of a simple Webpack config in our example project:

If you're using Typescript, add a configuration for it in tsconfig.json file. You can find an example of a simple Typescript config in our example project:

Add NPM scripts to your package.json file to start the application:

{
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  }
}

Now you can run your build process with npm run start.

npm run start

Import some of the core components in src/App.tsx and try them out:

import { Button, Container, Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

const App = () => {
  return (
    <Reshaped theme="reshaped">
      <Container width="652px">
        <Button href="/">Get started</Button>
      </Container>
    </Reshaped>
  );
};

You can find more details in our webpack-starter example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.