React Antd Tailwind Cypres Jest Template

ntwari-egide

official repository of react ant design tailwind and cypress jest testing template

Download

❯ Getting Started

Step 1: Set up the Development Environment

You need to set up your development environment before you can do anything.

Install Node.js and NPM

on OSX use homebrew brew install node
on Windows use chocolatey choco install nodejs

Install yarn globally

yarn global add yarn

Install a POSTGRES database.

If you work with a mac, we recommend to use homebrew for the installation.

Step 2: Virtual environment

Then copy the .env.example file and rename it to .env. In this file you have to add your database connection information.

Create a new database with the name you have in your .env-file.

Then setup your application environment.

yarn run dev

This installs all dependencies with yarn. After that it migrates the database and seeds some test data into it. So after that your development environment is ready to use.

Step 3: Serve your App

Go to the project dir and start your app with this yarn script.

yarn run dev

This starts a local server using nodemon, which will watch for any file changes and will restart the server according to these changes. The server address will be displayed to you as http://0.0.0.0:3000.

❯ Scripts and Tasks

All script are defined in the package-scripts.js file, but the most important ones are listed here.

Install

Install all dependencies with yarn install

Linting

Run code quality analysis using yarn start lint. This runs tslint.
There is also a vscode task for this called lint.

Tests

Run the unit tests using yarn start test (There is also a vscode task for this called test).
Run the integration tests using yarn start test.integration.
Run the e2e tests using yarn start test.e2e.

Running in dev mode

Run yarn run dev to start nodemon with ts-node, to serve the app.
The server address will be displayed to you as http://0.0.0.0:3000

Building the project and run it

Run yarn run build to generated all JavaScript files from the TypeScript sources (There is also a vscode task for this called build).
To start the builded app located in dist use yarn run dev.

❯ Debugger in VSCode

To debug your code run yarn start build or hit cmd + b to build your app. Then, just set a breakpoint and hit F5 in your Visual Studio Code.

❯Project Structure

In this repository, we have the following folder structure

Route	Description
/src	Source folder ot the repository
/src/--tests--	All project's tests are written here
/src/assets	All project's assets are stored here
/src/constants	All project's constants like axios global configurations are stored here
/src/styles	All project's styles are added here
/src/views	All project's pages are added here
/src/models	All re-usable components models are coded in this folder
/src/app.js	Entry point of the project dom implementation
/src/main.jsx	Entry point of the project dom implementation
vite.config.js	React Dom renderer
tailwind.config.js	Edit tailwind css configurations in this file
postcss.config.js	Works the same as tailwind.config.js
cypress.json	Configurations of cypress testing module
index.js	Example entity endpoint

❯ Docker

Install Docker

Before you start, make sure you have a recent version of Docker installed

Build Docker image

docker build -t <your-image-name> .

Run Docker image in container and map port

The port which runs your application inside Docker container is either configured as PORT property in your .env configuration file or passed to Docker container via environment variable PORT. Default port is 3000.

Run image in detached mode

docker run -d -p <port-on-host>:<port-inside-docker-container> <your-image-name>

Run image in foreground mode

docker run -i -t -p <port-on-host>:<port-inside-docker-container> <your-image-name>

Stop Docker container

Detached mode

docker stop <container-id>

You can get a list of all running Docker container and its ids by following command

docker images

Foreground mode

Go to console and press + C at any time.

Docker environment variables

There are several options to configure your app inside a Docker container

project .env file

You can use .env file in project root folder which will be copied inside Docker image. If you want to change a property inside .env you have to rebuild your Docker image.

run options

You can also change app configuration by passing environment variables via docker run option -e or --env.

docker run --env DB_HOST=localhost -e DB_PORT=3306

environment file

Last but not least you can pass a config file to docker run.

docker run --env-file ./env.list

env.list example:

# this is a comment
DB_TYPE=mysql
DB_HOST=localhost
DB_PORT=3306

❯ License

MIT

Top categories