These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Run the command below to clone the projects repository, this will clone both the projects repository and the soul
submodule repository.
git clone --recurse-submodules https://github.com/DeepBlueCLtd/Soul4ReactAdmin.git
Copy the chinook.db
database file from the db
folder to the soul/core
folder
cp db/chinook.db soul/core
Create a .env
file in the soul/core
folder and duplicate the sample environment varialbes
cd soul/core
cp .env.sample .env
Edit the environment variables
Edit the Database name and add your frontend applications URL to the CORS white list
nano .env
DB=chinook.db
CORS_ORIGIN_WHITELIST=http://localhost:5173
Install the npm
packages
npm install
Run the core API
npm run dev
Create a .env
file and duplicate the sample environment varialbes
cd client
cp .env.sample .env
Install the npm packages
npm install
Run the client application
npm run dev
Go to the /soul/core
folder and create a folder named _extensions
and create a file named api.js
in the folder.
cd soul/core
md _extensions
cd _extensions && touch api.js
Copy and paste the code below to the api.js
file
const path = require("path");
const express = require("express");
const reactAdminClient = {
method: "GET",
path: "/api/client",
handler: (req, res, db) => {
const clientPath = path.join(__dirname, "dist", "index.html");
res.app.use(express.static(path.join(__dirname, "dist")));
res.sendFile(path.join(clientPath));
},
};
module.exports = {
reactAdminClient,
};
Run the pwd
command in the _extensions
folder and copy the absolute path of the folder, and add it to your .env file
nano .env
EXTENSIONS=/absolute/path/to/_extensions
Go to the client folder and build the project
cd ../../../client
yarn build
After finisshing the build, copy the dist
folder and paste it to the soul/core/_extensions
folder
cp -R dist ../soul/core/_extensions
Go to the soul/core
folder and run the project
cd ../soul/core
npm run dev
Test if the project is working in your browser
http://localhost:8000/api/client
Test the getList
provider
Genres
tabgetList
provider and will fetch list of data from the Soul
API.Test the getOne
provider
Genres
tabGenres
tablegetOne
provider and will fetch a single recordTest the getMany
provider
Click the Invoice Items
tab
When you click the tab, the <ReferenceField />
component will trigger the getMany
provider and it will fetch list of Tracks
by using the TrackIds
http://localhost:8000/api/tables/tracks/rows/1,2,3,4,5,6
Test the getManyReference provider
Albums
tab<ReferenceManyField />
component will trigger the getManyReference
provider and it will fetch list of Tracks
that belong to the current Album
Test the update
provider
Genre
tabEdit
button from the first rowupdate
provider and a PUT
request will be sent to the Soul
APITest the updateMany
provider
Invoice Item
tabMake Free
button in the top right cornorMake Free
buttonMake Free
button, react admin will trigger the updateMany
provider and a bulk update request will be sent to the Soul
APITest the create
provider
Genre
tabCreate
button which exists in the top right cornercreate
provider and a POST
request will be sent to the Soul
APITest the deleteMany
provider
Invoice Item
tabdeleteMany
provider and a DELETE
request will be sent to the Soul
API.