poemkit
PoemKit Stable
Gedichtkit „ width="180" style="max-width: 100%;">
Ein kostenloses Webkit mit React für schnelles Webdesign und -entwicklung über SSR. Es handelt sich auch um eine Micro-Frontend-Architektur. Verwendung von React, Redux, Router, Axios und Express. Dieses Projekt wurde mit der NodeJS-Bibliothek gebootet. Project unterstützt automatische Bereitstellungen von einer Reihe von Repository-Hosting-Diensten über pm2. poemkit bietet mehr als 50 integrierte UI-Komponenten für die Erstellung moderner Webanwendungen.
poemkit kann über Befehle funktionieren und bereitstellen, es erfordert jedoch, dass dahinter echter Code geschrieben wird. Diese Kits dienen als UI-Komponenten und einige Logikmodule, die zu einer echten Website oder einem Anwendungsprototyp zusammengestellt werden können, für deren Funktionieren in der realen Welt jedoch noch Programmierfunktionen erforderlich sind. poemkit erfüllt vollständig anpassbare Webpack-Anforderungen.
? Sie können auch eine eigenständige React-UI-Komponentenbibliothek (basierend auf BootStrap 5) Funda UI verwenden.
Für eine Online-Demo besuchen Sie bitte https://uiux.cc/poemkit
Der Server läuft unter 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 ändern, um die Speichermontage zu verwenden). Auf Ihrem Computer muss ein Knoten eingerichtet sein. Dadurch werden die erstellten Distributables an ./dist/* und ./public/*.html ausgegeben.
Schritt 1: Verwenden Sie NPM (Suchen Sie Ihr aktuelles Projektverzeichnis und geben Sie den folgenden Befehl ein.) oder laden Sie die neueste Version von Github herunter. Für Nodejs müssen Sie einige Abhängigkeiten installieren.
$ npm install poemkitOder klonen Sie das Repo, um alle Quelldateien einschließlich Build-Skripten zu erhalten:
$ git clone git://github.com/xizon/ poemkit .git Schritt 2. Verwenden Sie zunächst einen absoluten Pfad in Ihr Ordnerverzeichnis " poemkit /" .
$ cd /{your_directory}/ poemkit Schritt 3. Bevor Sie alle Entwicklungsarbeiten erledigen, stellen Sie sicher, dass Sie Node 10+ installiert haben. Führen Sie anschließend den folgenden Code im Hauptverzeichnis aus, um die Knotenmodulabhängigkeiten zu installieren.
$ npm installDie aktuelle Testumgebung ist „Node 18+“, „npm 9+“. Wenn die Abhängigkeitsinstallation fehlschlägt (normalerweise liegt das daran, dass Sie Ihre Nodejs-Version aktualisiert haben, die derzeit auf Node 18+ getestet wurde), besteht möglicherweise ein Konflikt zwischen der neuen Version von npm und der alten Version von npm. Bitte verwenden Sie den folgenden Befehl, um Abhängigkeiten zu installieren:$ npm install --legacy-peer-depsWenn die Installation immer noch fehlschlägt, verwenden Sie bitte diese Methode: Entfernen Sie devDependencies , dependencies und peerDependencies in
package.json, löschen Sie die Dateipackage-lock.jsonund installieren Sie Abhängigkeiten neu:$ 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]
Schritt 4. Häufig verwendete Befehle:
Debug-Anwendung. Es kann separat als TypeScript ohne Kompilierungs- und Verpackungsverhalten überprüft werden.
$ npm run checkSo verwenden Sie Webpack zum Bündeln von Dateien.
$ npm run build Führen Sie die folgenden Befehle für lokale Tests und Codeprüfungen aus. Sie können sehen, dass der Server läuft. (Nur den Express-Server ausführen.) Verwenden Sie Ctrl + C um es zu stoppen.
$ npm run devSchritt 5. Wenn Sie fertig sind, wird ein Server eingerichtet, auf den Sie unter zugreifen können
http://localhost:3000Es wird empfohlen, den neuen Code vor dem Debuggen zu bündeln.
Schritt 6 (optional). Stellen Sie den Knotenserver auf dem Hosting-Server bereit
Bitte führen Sie vor der Bereitstellung den Build-Befehl aus. (Wenn es aufgrund der Knotenberechtigung nicht funktioniert, verwenden Sie die folgenden Befehle)
$ npm run deploy Stoppen Sie die vorhandenen Bereitstellungen
$ npm run destroySchritt 7 (optional). Unit-Tests
$ npm run testNotiz:
a) FEHLER: NPM-Update-Prüfung fehlgeschlagen.
Lösung:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configb) FEHLER: Node Sass Version 6.xx ist nicht kompatibel mit ^ 4.xx
Lösung:
$ npm install [email protected]c) Wenn Sie die Version von Node aktualisieren, führen Sie bitte den folgenden Code aus:
$ npm install $ npm rebuild node-sass
Starten Sie die Reactjs-Anwendung mit PM2 als Dienst (funktioniert nur, wenn Sie Node v13.9.0 oder höher verwenden.)
Hier wird die Node14+-Version installiert
$ 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 logsEinige Lösungen für Probleme, die bei der Bereitstellung der Anwendung mit NPM oder PM2 auf einem Cloud-Server auftreten können:
a）FEHLER: Berechtigung verweigert, Zugriff auf „/usr/lib/node_modules“
Lösung:
chmod -R a+x node_modulesb）FEHLER: JavaScript-Heap hat nicht genügend Speicher
In V8 gibt es ein striktes Standardlimit für die Speichernutzung, das bei maximal ~1 GB (32-Bit) und ~1,7 GB (64-Bit) liegt, sofern Sie diese nicht manuell erhöhen.
Lösung:
export NODE_OPTIONS=--max_old_space_size=4096c) Fehler: EACCES: Berechtigung verweigert, mkdir '/root/.pm2/xxxx'
Lösung:
Vermeiden Sie im Allgemeinen die Verwendung von
NPMzum Ausführen von PM2-Befehlen.Du könntest noch Folgendes versuchen:
Stellen Sie sicher, dass Sie alle PM2-Instanzen beenden, bevor Sie PM2 im No-Deamon-Modus starten (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
Sie haben von hier aus eine einfache React-App erstellt und müssen dann eine React-App auf dem Apache- oder Nginx-Webserver bereitstellen. Das Tutorial zum Einrichten des Proxys finden Sie im Netzwerk.
Da die App nun zur Bereitstellung bereit ist, sollten wir das Nginx-Ende vorbereiten. Falls Nginx nicht installiert ist, kann es einfach mit dem apt-Paketsystem installiert werden, indem Sie die folgenden zwei Befehle ausführen:
$ sudo apt update
$ sudo apt install nginxoder
$ sudo yum install nginx -yStarten Sie Nginx:
$ systemctl start nginxBeim Booten beginnen:
$ systemctl enable nginxRichten Sie eine Firewall mit FirewallD unter CentOS 8 ein:
$ 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 Wir können überprüfen, ob Nginx auf dem System läuft:
$ systemctl status nginx Okay, jetzt, da der Nginx-Dienst erfolgreich gestartet wurde, können wir fortfahren und die Konfigurationsdatei unter /etc/nginx/conf.d/default.conf ändern. Hier weisen wir die Domain darauf hin, die richtige React-Anwendung zu starten:
$ vi /etc/nginx/conf.d/default.confFügen Sie am Ende der Datei Folgendes hinzu:
server {
listen 443 ssl ;
server_name backend1.example.com ;
...
location / {
proxy_set_header Host $http_host ;
proxy_pass http://{YOUR_IP}:3000 ;
}
}Nachdem wir diese Zeilen zur Datei hinzugefügt haben, müssen wir den Nginx-Dienst neu starten:
$ systemctl restart nginxBei einem erfolgreichen Neustart des Dienstes werden wahrscheinlich keine Meldungen angezeigt. Andernfalls werden Zeilen mit Fehlermeldungen ausgegeben.
Ändern Sie die Datei ./src/server/app.js und verwenden Sie https.createServer([options][, requestListener]), um den Express-Dienst zu umschließen. Schauen Sie sich bitte den Beispielcode unten an:
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` ) ) ; Um in Ihrer webpack.config.js zwischen Entwicklungs- und Produktions-Builds zu unterscheiden, können Sie Umgebungsvariablen verwenden.
Wenn Sie sowohl OS X als auch Windows berücksichtigen möchten, können Sie das Drittanbieter-Tool Cross-Env verwenden
Schritt 1: Führen Sie den Befehl aus, um Cross-Env zu installieren
$ npm install --save-dev cross-env Schritt 2. Weiter in der Datei package.json in Skripten geben wir den vorgefertigten Befehl zum Zusammenstellen des Webpacks in der Produktionsversion an
"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 "
} Wo durch Cross-Env Variable und Wert NODE_ENV=xxx gesetzt werden und wir diese Variable dann während der Ausführung des Webpacks erhalten
Schritt 3. Weiter in der Konfigurationsdatei webpack.config.js wenden wir diese Prüfung vom Objektprozess und weiteren Eigenschaften env auf unsere Variable NODE_ENV an:
if ( process . env . NODE_ENV === 'production' ) {
// .. тwe apply (or add) some kind of plugin
} Ändern Sie die Standardvorlage ./src/client/views/_html/index.html . Es wird automatisch als ./public/index.html generiert. Es enthält die HTML-Tags, die React Helmet verwenden muss, zum Beispiel:
<!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 > Die Datei ./public/manifest.json wird automatisch basierend auf ./src/config/tmpl-manifest.json generiert
Sie können die Modulauflösung konfigurieren, indem Sie „resolve“ zur webpack.config.js hinzufügen. Wenn Sie beim Importieren eines anderen Moduls einen relativen Pfad verwenden, wäre dies mühsam, da Sie alle relativen Pfade herausfinden müssten. Daher können Sie zur Vereinfachung einen Alias hinzufügen.
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 "
}
}
} Verwenden Sie die Ausgabe in webpack.config.js um Einstellungen im Zusammenhang mit der Bibliothek wie den Modultyp und den Namespace zu konfigurieren.
...
const globs = {
port : 8080 ,
examples : 'public' ,
build : 'src/client' ,
dist : 'dist'
} ;
...
output : {
path : path . resolve ( __dirname , './' + globs . dist + '/js' ) ,
filename : '[name].js'
} ,
... Sie können die Platzhalter in Vorlagen aktualisieren, indem Sie die Site-Info-Konfiguration von package.json ändern. So was:
{
"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 " ,
...
} Konfiguration von Routen, die auch die primäre Navigation der Website darstellt (ohne die Konfiguration verschachtelter Routen, die auf der Seite in der primären Navigation konfiguriert werden). Zugriff auf ./src/client/router/RoutesConfig.js .
Einige Skripte des Routers können in der Datei ./src/client/router/App.js geändert werden.
Einige Skripte auf der Serverseite können in der Datei ./src/server/renderer.js geändert werden.
Um sowohl den Server als auch die React-Anwendung gleichzeitig auszuführen, müssen wir den proxy Schlüssel zu package.json hinzufügen. Wir haben unseren Server bereits so eingestellt, dass er auf Port 3000 läuft, also richten Sie den Proxy auf localhost:3000 .
{
"proxy" : " http://localhost:3000 " ,
...
}PropTypes um den Typ zu überprüfen: $ npm run devAnschließend können Sie den folgenden JavaScript-Code zum Debuggen verwenden. Fehler- und Warnmeldungen im Terminal anzeigen.
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 ] )
}
} Die Anwendung lädt standardmäßig einige Bibliotheken von Drittanbietern (Symbole, Animationen, 3D-Engines usw.). Sie können sie nach Bedarf laden oder die Konfigurationsdatei ändern. Zugriff auf ./src/client/components/_plugins/
Plug-Ins von Drittanbietern werden standardmäßig zusammen mit benutzerdefinierten Komponenten verwendet und können auch entfernt werden.
Ändern Sie das Stammverzeichnis der Website, damit es beim Hochladen des Projekts in ein anderes Verzeichnis verwendet werden kann. Ändern Sie den Schlüssel rootDirectory von ./src/config/websiteConfig.js .
Wenn sich die Datei im Stammverzeichnis befindet, können Sie sie leer lassen. Wenn Sie sich in einem anderen Verzeichnis befinden, können Sie Folgendes schreiben: „/blog“. (kein abschließender Schrägstrich)
{
"rootDirectory" : " "
} Die Site-Adresse (URL) wird im Allgemeinen zur SEO-Optimierung verwendet. Ändern Sie den Schlüssel siteUrl von ./src/config/websiteConfig.js . Die URL heißt https://domain-name.com (ohne abschließenden Schrägstrich und Unterverzeichnis).
{
"siteUrl" : " "
} Ändern Sie die API-URLs der Website. Ändern Sie die Schlüssel API von ./src/config/websiteConfig.js wie unten gezeigt:
{
"API" : {
"RECEIVE_DEMO_LIST" : " https://apiurl1.com " ,
"RECEIVE_DEMO_LISTDETAIL" : " https://apiurl2.com "
}
}Fehler finden, Pull-Anfragen senden oder unsere Dokumente verbessern – jeder Beitrag ist willkommen und wird sehr geschätzt. Schauen Sie sich zunächst unsere Beitragsrichtlinien an. Danke!
Veröffentlichungen
| Chrom | Firefox | Rand | IE | Safari | Oper | iOS | Android |
|---|---|---|---|---|---|---|---|
| >= 49 | >= 45 | >=14 | >=11 | >= 9 | >= 30 | >=10 | >=4,4 |
Lizenziert unter dem MIT.
