frontend

React + Tailwind + Vite + TS front-end

 

The front-end of this web app is somewhat straight-forward.

This aims to be a simple configuration as a foundation for a modern front-end on the web. It also has a simple API connection example. It's important that both the front-end and the back-end communicate through the same SSL configuration otherwise you'll get CORS issues. For more information you can also refer to the backend README.md file.

The preview of this is shown in the vite preview command and it's in: https://127.0.0.1:42210/

File structure

The general React files are of either .jsx or .tsx extensions (one for JavaScript and the other for TypeScript). The way it made is with functional components that return HTML elements and can also process JavaScript logic.

The functions look like this:

export default function App() {
  return (
    <>
      <h1>Hello world</h1>
      <p>
        Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
        cillum sint consectetur cupidatat.
      </p>
    </>
  );
}

It has some extra rules like that <>...</> part is called a "fragment" tag. It's used because everything needs to be under one tag in jsx/tsx. It doesn't affect the DOM rendering in any way though (doesn't make an extra empty tag or anything like that).

package.json

The file containing all the required dependencies. It also contains cool stuff like scripts that you can make and use with yarn/npm.

package-lock.json

The file containing locked (frozen) versions of the dependencies. Good for debugging in some cases.

yarn.lock

Has the same purpose as package-lock.json but for the yarn package manager (which is used because it's a lot quicker than npm).

tsconfig.json

Used for TypeScript compiler options, mostly left with the default vite setup.

tsconfig.node.json

As the name implies it's for TypeScript again, however, this file is for NodeJS environments only. This means its primarily for the development environment.

postcss.config.js

It contains JavaScript-based plugins which are used for CSS operations. The most popular one being TailwindCSS.

tailwind.config.js

TailwindCSS configurations such as the affected file extensions and also purging options (handy for release mode).

vite.config.js

Vite consists of front-end tools such as a preview and build command but also options for quickstarting your projects. The vite.config.js file in particular is used for configuring your vite build.

Setting up

The setup process is rather simple. I recommend reading in the package.json file to get to know more about the scripts that get ran. It uses nodemon for automatic recompiling.

npm

npm install
npm run watch # or: npm run build && npm preview

---

yarn

If you don't already have yarn installed (you may need to do the command with sudo because its --global).

npm install yarn --global

Proceed as normal.

yarn install
yarn run watch # or: yarn run build && yarn preview