poemkit
PoemKit Stable
kit de poemas " ancho="180" estilo="ancho máximo: 100%;">
Un kit web gratuito con React para un diseño y desarrollo web rápido a través de SSR. También es una arquitectura Micro-Frontend. Usando reaccionar, redux, enrutador, axios y express. Este proyecto se inició con la biblioteca nodejs. Project admite implementaciones automáticas desde varios servicios de alojamiento de repositorios a través de pm2. poemkit ofrece más de 50 componentes de interfaz de usuario integrados para crear aplicaciones web modernas.
poemkit puede funcionar e implementarse mediante comandos, pero aún requiere que se escriba código real detrás de ellos. Estos kits sirven como componentes de interfaz de usuario y algunos módulos lógicos que se pueden combinar en un sitio web real o un prototipo de aplicación que aún requerirá funciones de programación para que funcionen en el mundo real. poemkit cumple con los requisitos del paquete web totalmente personalizable.
? También puede utilizar una biblioteca de componentes de React UI independiente (basada en BootStrap 5) Funda UI.
Para una demostración en línea, consulte https://uiux.cc/poemkit
El servidor se ejecuta en http://localhost:3000
poemkit /
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── ecosystem.config.js ------------------------- # for pm2
├── babel.config.js
├── tsconfig.json
├── webpack.config.js
├── package-lock.json
├── package.json
├── test/ --------------------------- # Unit Testing scripts
├── public/ --------------------------- # HTML template of Homepage
│ ├── index.html
│ ├── manifest.json
│ └── server/ ------------------------------- # PHP scripts used to the server for testing
│ └── assets/
├── dist/ ------------------------------- # Files compiled, used in the production environment
│ ├── css/
│ │ ├── poemkit .css
│ │ └── poemkit .min.css
│ └── js/
│ │ ├── poemkit .js
│ │ └── poemkit .min.js
├── src/
│ ├── client/
│ │ ├── client.js
│ │ ├── actions/
│ │ ├── reducers/
│ │ ├── helpers/
│ │ ├── services/
│ │ ├── router/
│ │ ├── components/ ------------------------- # Independent React components
│ │ │ ├── * /
│ │ │ ├── _utils/ ----------------------- # General utilities & snippets(js & css)
│ │ │ └── _plugins/ --------------------- # Third-party plugins
│ │ ├── views/ ------------------------------ # Website pages
│ │ │ ├── _pages/
│ │ │ └── _html/
│ └── server/
│ │ ├── app.js
│ │ ├── server.js
│ │ └── renderer.js
│ └── store/
│ │ └── createStore.js
│ └── config/
│ │ ├── tmpl-manifest.json ----------------- # `manifest.json` file template
│ │ └── websiteConfig.js ------------------- # website config
└──webpack.config.js para usar el montaje en memoria) Necesitará tener configurado el nodo en su máquina. Eso generará los distribuibles creados en ./dist/* y ./public/*.html .
Paso 1. Utilice NPM (busque el directorio actual de su proyecto e ingrese el siguiente comando) o descargue la última versión de Github. Para nodejs tienes que instalar algunas dependencias.
$ npm install poemkitO clonar el repositorio para obtener todos los archivos fuente, incluidos los scripts de compilación:
$ git clone git://github.com/xizon/ poemkit .git Paso 2. Primero, use una ruta absoluta al directorio de su carpeta " poemkit /" .
$ cd /{your_directory}/ poemkit Paso 3. Antes de realizar todas las tareas de desarrollo, asegúrese de tener instalado Node 10+ . Después de eso, ejecute el siguiente código en el directorio principal para instalar las dependencias del módulo de nodo.
$ npm installEl entorno de prueba actual es `Nodo 18+`, `npm 9+`. Si la instalación de la dependencia falla (generalmente es porque actualizó su versión de Nodejs, actualmente probada al Nodo 18+), tal vez la nueva versión de npm entre en conflicto con la versión anterior de npm, use el siguiente comando para instalar las dependencias:$ npm install --legacy-peer-depsSi la instalación aún falla, utilice este método: elimine devDependencies , dependencias y peerDependencies en
package.json, elimine el archivopackage-lock.jsony reinstale las dependencias:$ npm install --save-dev @testing-library/jest-dom @testing-library/[email protected] @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-loader clean-webpack-plugin cross-env css-loader css-minimizer-webpack-plugin eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react file-loader glslify-loader html-loader html-webpack-plugin identity-obj-proxy include-file-webpack-plugin jest jsdom jest-environment-jsdom json-loader log-timestamp mime-types mini-css-extract-plugin sass nodemon postcss prettier prettier-loader random-string raw-loader [email protected] safe-buffer sass-loader style-loader tar terser-webpack-plugin ts-jest ts-node tsconfig-paths typescript webpack webpack-cli webpack-dev-middleware webpack-dev-server $ npm install @babel/core @babel/node @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-flow @babel/preset-react @babel/preset-typescript @babel/register axios babel-plugin-module-resolver compression cors express ignore-styles moment [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
Paso 4. Comandos de uso común:
Aplicación de depuración. Se puede verificar por separado como TypeScript sin compilar ni empaquetar el comportamiento.
$ npm run checkUsar webpack para agrupar archivos.
$ npm run build Ejecute los siguientes comandos para pruebas locales e inspección de código. Puede ver que el servidor se está ejecutando. (Ejecute únicamente el servidor Express). Usando Ctrl + C para detenerlo.
$ npm run devPaso 5. Cuando haya terminado, se activará un servidor al que se puede acceder en
http://localhost:3000Se recomienda incluir el nuevo código antes de la depuración.
Paso 6 (Opcional). Implementar el servidor de nodo en el servidor de alojamiento
Ejecute el comando de compilación antes de implementar. (Si no funciona debido al permiso del Nodo, use los siguientes comandos)
$ npm run deploy Detener las implementaciones existentes
$ npm run destroyPaso 7 (opcional). Pruebas unitarias
$ npm run testNota:
a) ERROR: falló la verificación de actualización de npm.
Solución:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configb) ERROR: Node sass versión 6.xx no es compatible con ^ 4.xx
Solución:
$ npm install [email protected]c) Si actualiza la versión de Node, ejecute el siguiente código:
$ npm install $ npm rebuild node-sass
Inicie la aplicación Reactjs con PM2 como servicio (solo funciona si está utilizando Node v13.9.0 o superior).
La versión Node14+ se instalará aquí
$ curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum install nodejs
$ node --version # v14.16.1
$ npm --version # 6.14.12
$ which node babel-node # check the location of node and babel-node $ sudo npm install pm2@latest -g$ sudo npm install -g babel-cli
$ sudo npm install -g @babel/core @babel/cli @babel/preset-env $ sudo npm install -g typescript ts-node$ sudo pm2 install typescript # into your `" poemkit /"` folder directory.
$ cd /{your_directory}/ poemkit
# run app
$ pm2 start ecosystem.config.js
# Detect available init system, generate configuration and enable startup system, and you can check the status of the same using
$ pm2 startup
$ systemctl status pm2-root
$ pm2 start /{your_directory}/ poemkit /ecosystem.config.js --restart-delay=3000
$ pm2 save
# other commands
$ pm2 restart ecosystem.config.js
$ pm2 stop ecosystem.config.js
$ pm2 delete ecosystem.config.js
$ pm2 list
$ pm2 logsAlgunas soluciones a problemas que pueden ocurrir al implementar la aplicación con NPM o PM2 en un servidor en la nube:
a)ERROR: permiso denegado, acceso '/usr/lib/node_modules'
Solución:
chmod -R a+x node_modulesb）ERROR: montón de JavaScript sin memoria
Existe un límite estándar estricto para el uso de memoria en V8 que es un máximo de ~1 GB (32 bits) y ~1,7 GB (64 bits), si no lo aumenta manualmente.
Solución:
export NODE_OPTIONS=--max_old_space_size=4096c) Error: EACCES: permiso denegado, mkdir '/root/.pm2/xxxx'
Solución:
En general, simplemente evite usar
NPMpara ejecutar comandos PM2.Aún puedes probar lo siguiente:
Asegúrese de eliminar cualquier instancia de PM2 antes de iniciar PM2 en modo sin demonios (pm2 kill).
# re-install PM2 (optional) sudo npm i -g pm2 # if pm2 was reinstalled, ts-node must be reinstalled (optional) sudo npm install -g ts-node@latest # clear all pm2 instances pm2 kill # then restart it pm2 start xxxxxx
Había creado una aplicación React básica desde aquí, luego necesita implementar una aplicación React en el servidor web Apache o Nginx. Consulte la red para obtener el tutorial sobre cómo configurar el proxy.
Ahora que la aplicación está lista para ser implementada, debemos preparar el final de Nginx. En caso de que Nginx no esté instalado, se puede instalar fácilmente con el sistema de empaquetado apt ejecutando los dos comandos siguientes:
$ sudo apt update
$ sudo apt install nginxo
$ sudo yum install nginx -yInicie Nginx:
$ systemctl start nginxComience en el arranque:
$ systemctl enable nginxConfigure un firewall usando FirewallD en CentOS 8:
$ firewall-cmd --permanent --zone=public --add-service=http
$ firewall-cmd --permanent --zone=public --add-service=https
$ firewall-cmd --permanent --zone=public --add-port=3000/tcp
$ firewall-cmd --reload
$ systemctl restart nginx Podemos comprobar si Nginx se está ejecutando en el sistema:
$ systemctl status nginx Muy bien, ahora que el servicio Nginx comenzó a ejecutarse exitosamente, podemos continuar y modificar el archivo de configuración que se encuentra en /etc/nginx/conf.d/default.conf . Aquí es donde apuntaremos el dominio para iniciar la aplicación React correcta:
$ vi /etc/nginx/conf.d/default.confAl final del archivo, agregue:
server {
listen 443 ssl ;
server_name backend1.example.com ;
...
location / {
proxy_set_header Host $http_host ;
proxy_pass http://{YOUR_IP}:3000 ;
}
}Después de agregar estas líneas al archivo, debemos reiniciar el servicio Nginx:
$ systemctl restart nginxProbablemente no habrá ningún mensaje si el servicio se reinició exitosamente. De lo contrario, generará líneas de mensajes de error.
Modifique el archivo ./src/server/app.js , use https.createServer([options][, requestListener]) para empaquetar el servicio express; consulte el código de muestra a continuación:
import path from 'path' ;
import https from 'https' ;
const cert = fs . readFileSync ( path . join ( __dirname , '../../path/bundle.crt' ) ) ;
const key = fs . readFileSync ( path . join ( __dirname , '../../path/ca.key' ) ) ;
const server = https . createServer ( { key : key , cert : cert } , app ) ;
...
app . get ( '/' , ( req , res ) => { res . send ( 'this is an secure server' ) } ) ;
...
server . listen ( port , ( ) => console . log ( `Frontend service listening on port: ${ port } , access https://localhost: ${ port } in the web browser` ) ) ; Para eliminar la ambigüedad en su webpack.config.js entre compilaciones de desarrollo y producción, puede utilizar variables de entorno.
Si desea considerar tanto OS X como Windows, puede utilizar la herramienta de terceros cross-env
Paso 1. Ejecute el comando para instalar cross-env
$ npm install --save-dev cross-env Paso 2. Más adelante en el archivo package.json en los scripts indicaremos el comando listo para usar para ensamblar el paquete web en la versión de producción.
"scripts" : {
"dev" : " cross-env NODE_ENV=development nodemon --require ignore-styles --exec ts-node -r tsconfig-paths/register ./src/server/server.js " ,
"build" : " cross-env NODE_ENV=production webpack --progress --mode production "
} Donde a través de cross-env establecemos la variable y el valor NODE_ENV=xxx y luego obtenemos esta variable durante la ejecución del paquete web
Paso 3. Más adelante en el archivo de configuración webpack.config.js apliquemos esta verificación del proceso del objeto y otras propiedades env a nuestra variable NODE_ENV :
if ( process . env . NODE_ENV === 'production' ) {
// .. тwe apply (or add) some kind of plugin
} Modifique la plantilla predeterminada ./src/client/views/_html/index.html . Se generará automáticamente como ./public/index.html . Contiene las etiquetas HTML que React Helmet necesita usar, por ejemplo:
<!DOCTYPE html >
< html {{helmetHtmlAttributes}} >
< head >
< meta charset =" utf-8 " />
{{helmetTitle}}
<!-- manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
============================================= -->
< link rel =" manifest " href =" @@{website_root_directory}/manifest.json " />
<!-- Mobile Settings
============================================= -->
< meta name =" viewport " content =" width=device-width, initial-scale=1, maximum-scale=1 " />
<!-- Mobile Settings end -->
<!-- Compatibility
============================================= -->
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
<!-- Compatibility end -->
<!-- Core & Theme CSS
============================================= -->
< link rel =" stylesheet " href =" @@{website_root_directory}/dist/css/ poemkit .min.css?ver=@@{website_hash} " />
<!-- Core & Theme CSS end -->
<!-- Overwrite Font Files
*
* The fonts extracted with `mini-css-extract-plugin` may not load correctly
* Font files in `dist/fonts/` are fetched automatically by `file-loader`, you can configure webpack.config.js to name them.
============================================= -->
< style >
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-solid-900.svg#fontawesome') format('svg');
}
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-brands-400.svg#fontawesome') format('svg');
}
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: $fa-font-display;
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot');
src: url('@@{website_root_directory}/dist/fonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff2') format('woff2'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.woff') format('woff'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.ttf') format('truetype'),
url('@@{website_root_directory}/dist/fonts/fa-regular-400.svg#fontawesome') format('svg');
}
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
</ style >
<!-- Overwrite Font Files end -->
<!-- SEO
============================================= -->
{{helmetMeta}}
{{helmetLink}}
< meta name =" generator " content =" @@{website_generator} " />
< meta name =" author " content =" @@{website_author} " />
<!-- SEO end -->
<!-- Favicons
============================================= -->
< link rel =" icon " href =" @@{website_root_directory}/assets/images/favicon/favicon-32x32.png " type =" image/x-icon " />
< link rel =" shortcut icon " href =" @@{website_root_directory}/assets/images/favicon/favicon-32x32.png " sizes =" 32x32 " />
< link rel =" apple-touch-icon " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-57x57.png " />
< link rel =" apple-touch-icon " sizes =" 72x72 " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-72x72.png " />
< link rel =" apple-touch-icon " sizes =" 114x114 " href =" @@{website_root_directory}/assets/images/favicon/apple-touch-icon-114x114.png " />
<!-- Favicons end -->
</ head >
< body {{helmetBodyAttributes}} >
< noscript >
You need to enable JavaScript to run this app.
</ noscript >
< div id =" app " > {{reactApp}} </ div >
<!-- Your Plugins & Theme Scripts
============================================= -->
< script >
var REVISION = "@@{website_version}" ,
APP_ROOTPATH = {
"templateUrl" : "@@{website_root_directory}" , //If the file is in the root directory, you can leave it empty. If in another directory, you can write: "/blog" (but no trailing slash)
"homeUrl" : "" , //Eg. https://uiux.cc
"ajaxUrl" : "" //Eg. https://uiux.cc/wp-admin/admin-ajax.php
} ;
</ script >
< script > window . __PRELOADED_STATE__ = { { preloadedState } } ; </ script >
< script src =" @@{website_root_directory}/dist/js/ poemkit .min.js?ver=@@{website_hash} " > </ script >
<!-- Your Plugins & Theme Scripts end -->
</ body >
</ html > El archivo ./public/manifest.json se genera automáticamente en función de ./src/config/tmpl-manifest.json
Puede configurar la resolución del módulo agregando resolve a webpack.config.js . Si utiliza una ruta relativa cuando importa otro módulo, sería molesto porque tendría que averiguar todas las rutas relativas. Por lo tanto, puede agregar un alias para que le resulte más fácil.
webpack.config.js :
...
const alias = {
pathConfig : './src/config' ,
pathComponents : './src/client/components' ,
pathRouter : './src/client/router' ,
pathHelpers : './src/client/helpers' ,
pathServices : './src/client/services' ,
pathReducers : './src/client/reducers' ,
pathPages : './src/client/views/_pages' ,
pathActions : './src/client/actions' ,
pathServer : './src/server' ,
pathStore : './src/store'
} ;
...
resolve : {
extensions : [ '.js' , '.jsx' , '.ts' , '.tsx' , '.scss' , '.sass' ] ,
alias : {
// specific mappings.
// Supports directories and custom aliases for specific files when the express server is running,
// you need to configure the `babel.config.js` and `tsconfig.json` at the same time
'@/config' : path . resolve ( __dirname , alias . pathConfig ) ,
'@/components' : path . resolve ( __dirname , alias . pathComponents ) ,
'@/router' : path . resolve ( __dirname , alias . pathRouter ) ,
'@/helpers' : path . resolve ( __dirname , alias . pathHelpers ) ,
'@/services' : path . resolve ( __dirname , alias . pathServices ) ,
'@/reducers' : path . resolve ( __dirname , alias . pathReducers ) ,
'@/pages' : path . resolve ( __dirname , alias . pathPages ) ,
'@/actions' : path . resolve ( __dirname , alias . pathActions ) ,
'@/server' : path . resolve ( __dirname , alias . pathServer ) ,
'@/store' : path . resolve ( __dirname , alias . pathStore ) ,
}
} ,
... babel.config.js :
...
"plugins" : [
[ "module-resolver" , {
"root" : [ "./src" ] ,
"alias" : {
"@/config" : "./src/config" ,
"@/components" : "./src/client/components" ,
"@/router" : "./src/client/router" ,
"@/helpers" : "./src/client/helpers" ,
"@/services" : "./src/client/services" ,
"@/reducers" : "./src/client/reducers" ,
"@/pages" : "./src/client/views/_pages" ,
"@/actions" : "./src/client/actions" ,
"@/server" : "./src/server" ,
"@/store" : "./src/store"
}
} ]
]
. . . tsconfig.json :
{
"compilerOptions" : {
"baseUrl" : " ./src " ,
"paths" : {
"@/config/*" : [ " config/* " ],
"@/components/*" : [ " client/components/* " ],
"@/router/*" : [ " client/router/* " ],
"@/helpers/*" : [ " client/helpers/* " ],
"@/services/*" : [ " client/services/* " ],
"@/reducers/*" : [ " client/reducers/* " ],
"@/pages/*" : [ " client/views/_pages/* " ],
"@/actions/*" : [ " client/actions/* " ],
"@/server/*" : [ " server/* " ],
"@/store/*" : [ " store/* " ]
}
}
} package.json :
{
"jest" : {
"testEnvironment" : " jsdom " ,
"moduleNameMapper" : {
" \ .(css|less|scss|sass)$" : " identity-obj-proxy " ,
"^@/config/(.*)" : " <rootDir>/src/config/$1 " ,
"^@/components/(.*)" : " <rootDir>/src/client/components/$1 " ,
"^@/router/(.*)" : " <rootDir>/src/client/router/$1 " ,
"^@/helpers/(.*)" : " <rootDir>/src/client/helpers/$1 " ,
"^@/services/(.*)" : " <rootDir>/src/client/services/$1 " ,
"^@/reducers/(.*)" : " <rootDir>/src/client/reducers/$1 " ,
"^@/pages/(.*)" : " <rootDir>/src/client/views/_pages/$1 " ,
"^@/actions/(.*)" : " <rootDir>/src/client/actions/$1 " ,
"^@/server/(.*)" : " <rootDir>/src/server/$1 " ,
"^@/store/(.*)" : " <rootDir>/src/store/$1 "
},
"transform" : {
"^.+ \ .(js|jsx)$" : " babel-jest " ,
"^.+ \ .(ts|tsx)?$" : " ts-jest "
}
}
} Utilice el resultado que se encuentra en webpack.config.js para configurar ajustes relacionados con la biblioteca, como el tipo de módulo y el espacio de nombres.
...
const globs = {
port : 8080 ,
examples : 'public' ,
build : 'src/client' ,
dist : 'dist'
} ;
...
output : {
path : path . resolve ( __dirname , './' + globs . dist + '/js' ) ,
filename : '[name].js'
} ,
... Puede actualizar los marcadores de posición en las plantillas modificando la configuración de información del sitio de package.json . Como esto:
{
"author" : " UIUX Lab " ,
"name" : " poemkit " ,
"email" : " [email protected] " ,
"version" : " 1.0.0 " ,
"projectName" : " poemkit " ,
"createdInfo" : " UIUX Lab (https://uiux.cc) " ,
"projectURL" : " https://uiux.cc " ,
"description" : " React toolkit for building a full website that also is a Micro-Frontend Architecture " ,
...
} Configuración de rutas, que también es la navegación principal del sitio web (sin incluir la configuración de Rutas anidadas que se configurarán en la página en la navegación principal). Acceso a ./src/client/router/RoutesConfig.js .
Algunos scripts del enrutador se pueden modificar en el archivo ./src/client/router/App.js .
Algunos scripts del lado del servidor se pueden modificar en el archivo ./src/server/renderer.js .
Para ejecutar tanto el servidor como la aplicación React al mismo tiempo, necesitamos agregar la clave proxy a package.json . Ya hemos configurado nuestro servidor para que se ejecute en el puerto 3000, así que apunte el proxy a localhost:3000 .
{
"proxy" : " http://localhost:3000 " ,
...
}PropTypes para comprobar el tipo: $ npm run devLuego, podría utilizar el siguiente código JavaScript para depurarlo. Mostrar mensajes de error y advertencia en el terminal.
import PropTypes from "prop-types" ;
import React , { Component } from 'react' ;
export default class YourComponentName extends Component {
public static propTypes = { } ;
constructor ( props ) {
super ( props ) ;
}
render ( ) { ... }
}
if ( process . env . NODE_ENV === 'development' ) {
YourComponentName . propTypes = {
displayEnable : PropTypes . bool . isRequired ,
htmlString : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . object ] )
}
} La aplicación carga algunas bibliotecas de terceros (iconos, animaciones, motores 3D, etc.) de forma predeterminada, puede cargarlas según sea necesario o modificar el archivo de configuración. Acceso a ./src/client/components/_plugins/
Los complementos de terceros se utilizan junto con componentes personalizados de forma predeterminada y también puede eliminarlos.
Cambie el directorio raíz del sitio web para que pueda usarse cuando cargue el proyecto en otro directorio. Modifique la clave rootDirectory de ./src/config/websiteConfig.js .
Si el archivo está en el directorio raíz, puede dejarlo vacío. Si está en otro directorio, puedes escribir: "/blog". (sin barra diagonal)
{
"rootDirectory" : " "
} La dirección del sitio (URL) se utiliza generalmente para la optimización SEO. Modifique la siteUrl del sitio clave de ./src/config/websiteConfig.js . La URL se llamará https://domain-name.com (sin barra diagonal ni subdirectorio)
{
"siteUrl" : " "
} Cambie las URL de API del sitio web. Modifique la API clave de ./src/config/websiteConfig.js , como se muestra a continuación:
{
"API" : {
"RECEIVE_DEMO_LIST" : " https://apiurl1.com " ,
"RECEIVE_DEMO_LISTDETAIL" : " https://apiurl2.com "
}
}Encontrar errores, enviar solicitudes de extracción o mejorar nuestros documentos: cualquier contribución es bienvenida y muy apreciada. Para comenzar, consulte nuestras pautas de contribución. ¡Gracias!
lanzamientos
| Cromo | Firefox | Borde | ES DECIR | Safari | Ópera | iOS | Androide |
|---|---|---|---|---|---|---|---|
| >= 49 | >= 45 | >=14 | >=11 | >= 9 | >= 30 | >=10 | >=4.4 |
Licenciado por el MIT.
