I have tried to change the HomeHeader of the Admin page, but it has no changes.
I copy admin folder in node_modules/#strapi/admin/admin to my-project/admin and then I modified HomeHeader.js file as the image below:
I started strapi with the command yarn strapi develop --watch-admin, and nothing happened
Please help me to custom this! Thanks
Strapi Version: 4.0.4
Operating System: MacOs
Database: postgres Node
Version: v14.18.1
NPM Version: 6.14.15
Yarn Version: 1.22.10
In Strapi-v3 you can customize the admin panel UI, but in v4 you can't.
there is an opened issue in GitHub about this problem.
I also encountered this requirement of a client.
To replace or customize Strapi admin dashboard home, you can overwrite the file using webpack.
First make sure to install webpack-dev-server in devDependencies.
Create a component file in src/admin/components/Home.tsx with basic React component code.
on the file src/admin/webpack.config.js write this code to replace the original Home page.
module.exports = (config, webpack) => {
...
/**
* Overwrite the dashboard home Component
*/
config.plugins.push(
new webpack.NormalModuleReplacementPlugin(
/.cache\/admin\/src\/pages\/HomePage\/index\.js/,
path.resolve(__dirname, "components/Home.tsx")
)
);
....
// Important: return the modified config
return config;
};
then re-build you app.
Related
After installing the API platform on my Symfony 6.2 project using the composer command composer require API
I can't find the api_platform.yaml file in config/packages folders, the only file related to API-PLATFORM I found is on the routes directory
Is this a new update? Or should I add it in a certain way?
Go to
config/packages/
Create
api_platform.yaml
Add your configuration
api_platform:
title: 'MY API'
Restart the Symfony Dev Server
symfony server:stop
symfony server:start
Check https://localhost:8000/api/docs to see the results.
Here you can see the server.js file configuration. Apparently all is working fine but if I put in the browser the url of the admin panel: http://localhost:1337/aplicaciones/strapi_accuee/admin it doesn't work. This is the image of the error:
Can anybody help me to configure properly this url prefix (/aplicaciones/strapi_accuee) in strapi?
config/server.js url is a baseUrl of your strapi project.
config/admin.js url is one that is appended to baseUrl to access admin panel.
so to setup it up properly, i would recomend adding .env file to the root of your project and set it up as so:
URL=http://localhost:1337
PUBLIC_ADMIN_URL=/myCustomAdminRoute
in config/server.js
module.exports = ({env}) => {
...
url: env("URL", "http://localhost:1337"),
...
in config/admin.js
module.exports = ({env}) => {
...
url: env("PUBLIC_ADMIN_URL", "/admin"),
...
yarn build
yarn develop
this would give you admin panel at:
http://localhost:1337/myCustomAdminRoute/
Api route:
http://localhost:1337/api/
For http://localhost:1337/aplicaciones/strapi_accuee
i suspect you want to move api under /aplicaciones/strapi_accuee/api and uploads under aplicaciones/strapi_accuee/uploads
in .env specify following:
URL=http://localhost:1337/aplicaciones/strapi_accuee
PUBLIC_ADMIN_URL=/admin
and do:
yarn build
yarn develop
I have a react application and I'm trying to use WebDataRocks to render data from my bd. But, when I try to build I'm getting an error that says:
TS2503: Cannot find namespace 'WebDataRocks'.
I tried several stuff, but I still receive the error. The only things that's working is when I add a flag of ignoring the typescript type of and index.d.js. But, I can't change the modules because it's not gonna work when I send the code for prod area.
My guess is the file should be tsx not ts. But, again I can't change the modules.
Any thoughts?
I kindly suggest creating a new project and embedding WebDataRocks to check how modules should be imported.
Here is a short guide:
If you don’t have a React+TS application yet, create one by running this command in the console:
npx create-react-app my-app --template typescript
cd my-app
Get the WebDataRocks React module from npm:
npm install react-webdatarocks
Add WebDataRocks’ styles to the src/index.tsx file:
import 'webdatarocks/webdatarocks.css'
Import the WebDataRocksReact module to the src/App.tsx file:
import * as WebDataRocksReact from 'react-webdatarocks';
Open src/App.tsx and add WebDataRocks there using the WebDataRocksReact.Pivot component:
function App() {
return (
<div className="App">
<WebDataRocksReact.Pivot
toolbar={true}
componentFolder="https://cdn.webdatarocks.com/"
width="100%"
report="https://cdn.webdatarocks.com/reports/report.json"
/>
</div>
);
}
Run your application:
npm start
Open http://localhost:3000/ in the browser — WebDataRocks is embedded into your React+TS project.
I'm actually running a Laravel website in which I would like to run a Vuepress documentation section.
Installing Vuepress is quite straightforward thanks to the instructions and so is the development server.
However, when it comes to integrating it as a static site, I'm kind of lost with the interactions with the Laravel.
All my documentation is located in a docs folder located on the root of the my Laravel App.
I managed to set up Vuepress' config.js to build the static site into another folder.
base: '/docs/',
dest:'./public/docs',
Doing the above, exposes the documentation is entirely exposed to the web (in the public folder).
However, what I'm looking for is to integrate it more precisely in Laravel (with the middleware and routes I created).
Method 1
1. Install vuepress in /docs in your laravel directory
2. Configure vuepress with the correct base and dest
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: 'docs/',
};
3. Enable laravel views to include files from the /public directory
/app/config/view.php
...
'paths' => [
resource_path('views'),
base_path('public'), // now blade's #include will also look in /public
],
...
4. Create a laravel route for vuepress that allows .html extension
/routes/web.php
use View;
Route::get('/docs', function() {
View::addExtension('html', 'php'); // allows .html
return view('docs.index'); // loads /public/docs/index.html
});
Method 2
Or for more control for assets through Laravel, you can try this tutorial here: https://serversideup.net/vuepress-within-a-laravel-application/
# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress
# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/README.md
package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: '/docs/',
};
npm run docs:build
/routes/web.php
Route::get('/docs', function() {
return File::get(public_path() . '/docs/index.html');
});
I'm trying to debug axios requests in my React Native app using axios-debug-log.
I've added the library: npm install --save-dev axios-debug-log
Before a user logs in and starts using the app, I set the local storage (or in RN's case, the AsyncStorage): AsyncStorage.setItem('debug', 'axios')
In the top of the file with my axios API requests, I added require('axios-debug-log');
However, I'm not seeing any logs when I use axios. The docs for axios-debug-log don't include any specifics about using the library with RN, so I'm not sure if there's something I'm doing wrong. If there is another library/ techniques I could use to debug axios requests in my RN app I would be open to using those as well.
Using AsyncStorage will not work. You need to set NODE environment variable.
Option 1
Add the following code on top of your index.js file.
let debug = require('debug');
debug.enable('axios');
Option 2
Other way you can do it is using npm 'babel-plugin-transform-inline-environment-variables' npm package.
run
npm install babel-plugin-transform-inline-environment-variables
Now got to .babelrc file inside your react-native app directory and add following code.
// .babelrc
{
“presets”: [“react-native”],
“plugins”: [
“transform-inline-environment-variables”
]
}
Finally run your app with following command. It will set a node env variable DEBUG as axios.
DEBUG=axios react-native run-ios
DEBUG=axios react-native run-android