poemkit
PoemKit Stable
poemakit "largura="180" estilo="largura máxima: 100%;">
Um web kit gratuito com React para web design e desenvolvimento rápido via SSR. Também é uma arquitetura de micro-frontend. Usando react, redux, roteador, axios e express. Este projeto foi inicializado com a biblioteca nodejs. O projeto oferece suporte a implantações automáticas de vários serviços de hospedagem de repositório via pm2. poemkit oferece mais de 50 componentes de UI integrados para a construção de aplicativos da web modernos.
poemkit pode funcionar e ser implantado por meio de comandos, mas ainda requer que código real seja escrito por trás deles. Esses kits servem como componentes de UI e alguns módulos lógicos que podem ser reunidos em um site real ou protótipo de aplicativo que ainda exigirá funções de programação para fazê-los funcionar no mundo real. poemkit atende aos requisitos de webpack totalmente personalizáveis.
? Você também pode usar uma biblioteca autônoma de componentes React UI (baseada no BootStrap 5) Funda UI.
Para demonstração online, confira https://uiux.cc/poemkit
O servidor é executado em 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 montagem em memória) Você precisará ter um nó configurado em sua máquina. Isso produzirá os distribuíveis criados para ./dist/* e ./public/*.html .
Etapa 1. Use o NPM (localize o diretório atual do projeto e digite o seguinte comando) ou baixe a versão mais recente do Github. Para nodejs você precisa instalar algumas dependências.
$ npm install poemkitOu clone o repositório para obter todos os arquivos de origem, incluindo scripts de construção:
$ git clone git://github.com/xizon/ poemkit .git Passo 2. Primeiro, usando um caminho absoluto para o diretório da pasta " poemkit /" .
$ cd /{your_directory}/ poemkit Etapa 3. Antes de fazer todas as tarefas de desenvolvimento, certifique-se de ter Node 10+ instalado. Depois disso, execute o seguinte código no diretório principal para instalar as dependências do módulo do nó.
$ npm installO ambiente de teste atual é `Node 18+`, `npm 9+`. Se a instalação da dependência falhar (geralmente é porque você atualizou sua versão do Nodejs, atualmente testada para o Node 18+), talvez a nova versão do npm entre em conflito com a versão antiga do npm, use o seguinte comando para instalar dependências:$ npm install --legacy-peer-depsSe a instalação ainda falhar, use este método: remova devDependencies , dependências e peerDependencies em
package.json, exclua o arquivopackage-lock.jsone reinstale as dependências:$ 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]
Passo 4. Comandos comumente usados:
Aplicativo de depuração. Ele pode ser verificado separadamente como TypeScript sem comportamento de compilação e empacotamento.
$ npm run checkPara usar o webpack para agrupar arquivos.
$ npm run build Execute os comandos a seguir para testes locais e inspeção de código. Você pode ver que o servidor está em execução. (Execute apenas o servidor Express.). Usando Ctrl + C para pará-lo.
$ npm run devEtapa 5. Quando terminar, isso irá ativar um servidor que pode ser acessado em
http://localhost:3000Recomenda-se que o novo código seja agrupado antes da depuração.
Etapa 6 (opcional). Implantar servidor de nó no servidor de hospedagem
Execute o comando build antes de implantar. (Se não funcionar devido à permissão do Node, use os seguintes comandos)
$ npm run deploy Pare as implantações existentes
$ npm run destroyEtapa 7 (opcional). Teste de unidade
$ npm run testObservação:
a) ERRO: falha na verificação de atualização do npm.
Solução:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configb) ERRO: Node sass versão 6.xx não é compatível com ^ 4.xx
Solução:
$ npm install [email protected]c) Se você atualizar a versão do Node, execute o seguinte código:
$ npm install $ npm rebuild node-sass
Inicie o aplicativo Reactjs com PM2 como serviço (funciona apenas se você estiver usando o Node v13.9.0 ou superior).
A versão Node14+ será instalada aqui
$ 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 logsAlgumas soluções para problemas que podem ocorrer ao implantar a aplicação com NPM ou PM2 em servidor cloud:
a）ERRO: permissão negada, acesso '/usr/lib/node_modules'
Solução:
chmod -R a+x node_modulesb）ERRO: pilha de JavaScript sem memória
Há um limite padrão estrito para o uso de memória no V8 de no máximo ~ 1 GB (32 bits) e ~ 1,7 GB (64 bits), se você não aumentá-lo manualmente.
Solução:
export NODE_OPTIONS=--max_old_space_size=4096c) Erro: EACCES: permissão negada, mkdir '/root/.pm2/xxxx'
Solução:
Em geral, evite usar
NPMpara executar comandos PM2.Você ainda pode tentar o seguinte:
Certifique-se de matar qualquer instância do PM2 antes de iniciar o PM2 no modo sem deamon (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
Você criou um aplicativo React básico a partir daqui e precisa implantar um aplicativo React no servidor web Apache ou Nginx. Consulte a rede para obter o tutorial sobre como configurar o proxy.
Agora que o aplicativo está pronto para ser implantado, devemos preparar o final do Nginx. Caso o Nginx não esteja instalado, ele pode ser facilmente instalado com o sistema de empacotamento apt executando os dois comandos a seguir:
$ sudo apt update
$ sudo apt install nginxou
$ sudo yum install nginx -yInicie o Nginx:
$ systemctl start nginxComece na inicialização:
$ systemctl enable nginxConfigure um firewall usando FirewallD no 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 verificar se o Nginx está rodando no sistema:
$ systemctl status nginx Tudo bem, agora que o serviço Nginx começou a ser executado com sucesso, podemos prosseguir e modificar o arquivo de configuração encontrado em /etc/nginx/conf.d/default.conf . É aqui que apontaremos o domínio para iniciar o aplicativo React correto:
$ vi /etc/nginx/conf.d/default.confNo final do arquivo, adicione:
server {
listen 443 ssl ;
server_name backend1.example.com ;
...
location / {
proxy_set_header Host $http_host ;
proxy_pass http://{YOUR_IP}:3000 ;
}
}Após adicionar estas linhas ao arquivo, precisamos reiniciar o serviço Nginx:
$ systemctl restart nginxProvavelmente não haverá mensagens se o serviço for reiniciado com sucesso. Caso contrário, ele emitirá linhas de mensagens de erro.
Modifique o arquivo ./src/server/app.js , use https.createServer([options][, requestListener]) para agrupar o serviço expresso, verifique o código de exemplo abaixo:
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 desambiguar em seu webpack.config.js entre compilações de desenvolvimento e produção, você pode usar variáveis de ambiente.
Se quiser considerar o OS X e o Windows, você pode usar a ferramenta de terceiros cross-env
Etapa 1. Execute o comando para instalar o cross-env
$ npm install --save-dev cross-env Passo 2. Mais adiante no arquivo package.json em scripts indicaremos o comando pronto para montagem do webpack na versão de produção
"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 "
} Onde através de cross-env definimos variável e valor NODE_ENV=xxx e então obtemos esta variável durante a execução do webpack
Etapa 3. Mais adiante no arquivo de configuração webpack.config.js vamos aplicar esta verificação do processo do objeto e outras propriedades env à nossa variável NODE_ENV :
if ( process . env . NODE_ENV === 'production' ) {
// .. тwe apply (or add) some kind of plugin
} Modifique o modelo padrão ./src/client/views/_html/index.html . Ele será gerado automaticamente como ./public/index.html . Ele contém as tags HTML que o React Helmet precisa usar, por exemplo:
<!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 > O arquivo ./public/manifest.json é gerado automaticamente com base em ./src/config/tmpl-manifest.json
Você pode configurar a resolução do módulo adicionando resolve ao webpack.config.js . Se você usar um caminho relativo ao importar outro módulo, seria incômodo porque você teria que descobrir todos os caminhos relativos. Portanto, você pode adicionar um alias para facilitar para você.
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 "
}
}
} Use a saída encontrada em webpack.config.js para definir as configurações relacionadas à biblioteca, como o tipo de módulo e o namespace.
...
const globs = {
port : 8080 ,
examples : 'public' ,
build : 'src/client' ,
dist : 'dist'
} ;
...
output : {
path : path . resolve ( __dirname , './' + globs . dist + '/js' ) ,
filename : '[name].js'
} ,
... Você pode atualizar os espaços reservados em modelos modificando a configuração de informações do site de package.json . Assim:
{
"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 " ,
...
} Configuração de rotas, que também é a navegação primária do site (não incluindo a configuração de rotas aninhadas que serão configuradas na página na navegação primária). Acesso a ./src/client/router/RoutesConfig.js .
Alguns scripts do roteador podem ser modificados no arquivo ./src/client/router/App.js .
Alguns scripts do lado do servidor podem ser modificados no arquivo ./src/server/renderer.js .
Para executar o servidor e o aplicativo React ao mesmo tempo, precisamos adicionar a chave proxy a package.json . Já configuramos nosso servidor para rodar na porta 3000, então aponte o proxy para localhost:3000 .
{
"proxy" : " http://localhost:3000 " ,
...
}PropTypes para verificar o tipo: $ npm run devEntão, você poderia usar o seguinte código JavaScript para depurá-lo. Exibir mensagens de erro e aviso no 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 ] )
}
} O aplicativo carrega algumas bibliotecas de terceiros (ícones, animações, motores 3D, etc.) por padrão, você pode carregá-las conforme necessário ou modificar o arquivo de configuração. Acesso a ./src/client/components/_plugins/
Plug-ins de terceiros são usados junto com componentes personalizados por padrão e você também pode removê-los.
Altere o diretório raiz do site para que ele possa ser usado ao carregar o projeto em outro diretório. Modifique a chave rootDirectory do ./src/config/websiteConfig.js .
Se o arquivo estiver no diretório raiz, você poderá deixá-lo vazio. Se estiver em outro diretório, você pode escrever: "/blog". (sem barra final)
{
"rootDirectory" : " "
} O endereço do site (URL) geralmente é usado para otimização de SEO. Modifique a chave siteUrl de ./src/config/websiteConfig.js . O URL será nomeado https://domain-name.com (sem barra final e subdiretório)
{
"siteUrl" : " "
} Altere os URLs da API do site. Modifique a API chave do ./src/config/websiteConfig.js , conforme mostrado abaixo:
{
"API" : {
"RECEIVE_DEMO_LIST" : " https://apiurl1.com " ,
"RECEIVE_DEMO_LISTDETAIL" : " https://apiurl2.com "
}
}Encontrar bugs, enviar solicitações pull ou melhorar nossos documentos - qualquer contribuição é bem-vinda e muito apreciada. Para começar, consulte nossas diretrizes de contribuição. Obrigado!
lançamentos
| Cromo | Raposa de fogo | Borda | Ou seja | Safári | Ópera | iOS | Android |
|---|---|---|---|---|---|---|---|
| >= 49 | >= 45 | >=14 | >=11 | >= 9 | >= 30 | >=10 | >=4,4 |
Licenciado pelo MIT.
