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

Install the latest version from NPM. You can track our latest releases in our changelog.

npm install reshaped

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

const { config } = require("reshaped/config/postcss");
module.exports = 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 starter-webpack example on Github. If you want to learn more about components - search for the relevant components documentation in the sidebar.

Previous
Next