Drupal Admin UI
- Drupal Admin UI
- PHP 5.5.9 or greater
- PHP's pdo_sqlite extension installed. You can use
php -mto check.
- SQLite 3 CLI package
- For Ubuntu users,
sudo apt install sqlite3. You can use
sqlite3 --versionto check that the CLI is available.
- For Ubuntu users,
composer create-project jsdrupal/drupal-admin-ui-demo -s dev --prefer-dist cd drupal-admin-ui-demo composer setup
Try visiting one of the converted pages, e.g. the user permissions or roles page.
- Ensure you have Node 8 or greater and Yarn installed.
- Make sure the webserver for Drupal is started with
composer devify. You will now have a checkout of this repo in
drupal-admin-ui. It will also symlink the bundled production app to
docroot/vfancy, and the support module to
drupal-admin-ui/.env.localand add in the URL for your currently running Drupal installation that was output from the start command. e.g. for
Starting webserver on http://127.0.0.1:8888, set
- Enter the repo with
cd drupal-admin-uiand start the Webpack dev server with
yarn workspace admin-ui start. This will open a new window at
The webpack dev server has hot reloading, however you won't be able to seamlessly switch between
Drupal and the React app. If you want to test out your changes in this context, enter the
drupal-admin-ui directory and run
yarn workspace admin-ui build. You can then visit the URL that
composer start generated.
composer start # New terminal window: composer devify # Add the URL generated from the start command: vim drupal-admin-ui/.env.local cd drupal-admin-ui yarn workspace admin-ui start
Due to outstanding performance issues,
react-axe is behind a flag. To enable the assessment provided by
react-axe, pass an environment variable when starting the application.
REACT_APP_AXE=true yarn workspace admin-ui start
See package.json for a full list
||Serves your app at
||Compiles the application for production into folder
||Runs all available tests.|
||Starts Storybook UI dev environment|
When deciding which system to use to add test coverage, the general rule is Nightwatch should be used to test the common path, and Jest can be used for more detailed test coverage. Nightwatch tests will run slower as they simulate clicking around in a real browser.
Contributing to This Repository
- Fork this repo to your own user
- Set your fork as origin, and this repo as upstream. From inside the
git remote rm origin git remote add origin email@example.com:<your-username>/drupal-admin-ui.git git remote add upstream firstname.lastname@example.org:jsdrupal/drupal-admin-ui.git
- Make your proposed changes on a branch and then push them to your fork
git push origin <your-branch>
- Make a pull request!
- Switch back to master and pull in the latest changes
git checkout master git pull upstream master
If someone has made a pull request and you would like to add code to their branch, there are a number of ways to move forward. It will be very helpful to get familiar with managing remotes in Git.
Once agreed, you can make a pull request to their fork/branch, which once accepted will appear in the pull request to the main jsdrupal/drupal-admin-ui repo
Alternatively, they could give you access to modify their branch directly at
https://github.com/<username>/drupal-admin-ui/settings/collaboration(although bear in mind this will give access to their entire repository fork)
If you're unable to agree, or unable to get in touch with the author, you could create a new pull request that incorporates the work from their branch
git remote add <their-username> email@example.com:<their-username>/drupal-admin-ui.git git fetch <their-username> git checkout -b <branch-name> <their-username>/<branch-name> . . work, commit things, etc . git push <your-fork> <branch-name>