poemkit
PoemKit Stable
kit puisi " lebar = "180" style = "lebar maksimal: 100%;">
Kit web gratis dengan React untuk desain dan pengembangan web cepat melalui SSR. Ini juga merupakan Arsitektur Micro-Frontend. Menggunakan reaksi, redux, router, aksio dan ekspres. Proyek ini di-bootstrap dengan perpustakaan nodejs. Project mendukung penerapan otomatis dari sejumlah layanan hosting repositori melalui pm2. poemkit memberikan lebih dari 50+ komponen UI bawaan untuk membangun aplikasi web modern.
poemkit dapat bekerja dan diterapkan melalui perintah, masih memerlukan kode nyata untuk ditulis di belakangnya. Kit ini berfungsi sebagai komponen UI dan beberapa modul logika yang dapat disatukan menjadi situs web nyata atau prototipe aplikasi yang masih memerlukan fungsi pemrograman agar dapat berfungsi di dunia nyata. poemkit memenuhi persyaratan webpack yang sepenuhnya dapat disesuaikan.
? Anda juga dapat menggunakan pustaka komponen React UI yang berdiri sendiri (berdasarkan BootStrap 5) Funda UI.
Untuk demo online, silakan checkout https://uiux.cc/poemkit
Server berjalan di 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 untuk menggunakan memory mount) Anda harus memiliki pengaturan node di mesin Anda. Itu akan menampilkan distribusi yang dibangun ke ./dist/* dan ./public/*.html .
Langkah 1. Gunakan NPM (Temukan direktori proyek Anda saat ini, dan masukkan perintah berikut.) atau unduh versi terbaru dari Github. Untuk nodejs Anda harus menginstal beberapa dependensi.
$ npm install poemkitAtau kloning repo untuk mendapatkan semua file sumber termasuk skrip build:
$ git clone git://github.com/xizon/ poemkit .git Langkah 2. Pertama, gunakan jalur absolut ke direktori folder " poemkit /" Anda.
$ cd /{your_directory}/ poemkit Langkah 3. Sebelum melakukan semua hal dev pastikan Anda telah menginstal Node 10+ . Setelah itu, jalankan kode berikut di direktori utama untuk menginstal dependensi modul node.
$ npm installLingkungan pengujian saat ini adalah `Node 18+`, `npm 9+`. Jika instalasi dependensi gagal (Biasanya karena Anda telah mengupgrade versi Nodejs Anda, saat ini diuji ke Node 18+), mungkin npm versi baru akan konflik dengan npm versi lama, silakan gunakan perintah berikut untuk menginstal dependensi:$ npm install --legacy-peer-depsJika instalasi masih gagal, silakan gunakan metode ini: hapus devDependencies , dependencies dan peerDependencies di
package.json, hapus filepackage-lock.jsondan instal ulang dependensi:$ 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]
Langkah 4. Perintah yang umum digunakan:
Men-debug aplikasi. Itu dapat diperiksa secara terpisah sebagai TypeScript tanpa perilaku kompilasi dan pengemasan.
$ npm run checkUntuk menggunakan webpack untuk menggabungkan file.
$ npm run build Jalankan perintah berikut untuk pengujian lokal dan pemeriksaan kode. Anda dapat melihat bahwa server sedang berjalan. (Jalankan server Express saja.). Menggunakan Ctrl + C untuk menghentikannya.
$ npm run devLangkah 5. Setelah selesai, ini akan memutar server yang dapat diakses di
http://localhost:3000Kode baru disarankan untuk dibundel sebelum melakukan debug.
Langkah 6 (Opsional). Menyebarkan server node di server hosting
Silakan jalankan perintah build sebelum menerapkan. (Jika tidak berhasil karena izin Node, gunakan perintah berikut)
$ npm run deploy Hentikan penerapan yang ada
$ npm run destroyLangkah 7 (Opsional). Pengujian Satuan
$ npm run testCatatan:
a) KESALAHAN: pemeriksaan pembaruan npm gagal.
Larutan:
$ sudo chown -R $USER : $( id -gn $USER ) /Users/{username}/.configb) KESALAHAN: Node sass versi 6.xx tidak kompatibel dengan ^ 4.xx
Larutan:
$ npm install [email protected]c) Jika Anda mengupgrade versi Node, silakan jalankan kode berikut:
$ npm install $ npm rebuild node-sass
Mulai aplikasi Reactjs dengan PM2 sebagai layanan (hanya berfungsi jika Anda menggunakan Node v13.9.0 atau lebih tinggi.)
Versi Node14+ akan diinstal di sini
$ 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 logsBeberapa solusi permasalahan yang mungkin terjadi saat melakukan deployment aplikasi dengan NPM atau PM2 di cloud server:
a）ERROR: izin ditolak, akses '/usr/lib/node_modules'
Larutan:
chmod -R a+x node_modulesb）ERROR: JavaScript kehabisan memori
Ada batasan standar ketat untuk penggunaan memori di V8 maksimal ~1GB (32-bit) dan ~1,7GB (64-bit), jika Anda tidak menambahnya secara manual.
Larutan:
export NODE_OPTIONS=--max_old_space_size=4096c) Kesalahan: EACCES: izin ditolak, mkdir '/root/.pm2/xxxx'
Larutan:
Secara umum, hindari penggunaan
NPMuntuk menjalankan perintah PM2.Anda masih dapat mencoba yang berikut ini:
Pastikan Anda mematikan instance PM2 apa pun sebelum memulai PM2 dalam mode tanpa deamon (pembunuhan pm2).
# 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
Anda telah membuat Aplikasi React dasar dari sini, lalu Anda perlu menerapkan Aplikasi React di server web Apache atau Nginx. Silakan merujuk ke jaringan untuk tutorial tentang pengaturan proxy.
Sekarang aplikasi sudah siap untuk dikerahkan, kita harus menyiapkan ujung Nginx. Jika Nginx tidak diinstal, maka dapat dengan mudah diinstal menggunakan sistem pengemasan apt dengan menjalankan dua perintah berikut:
$ sudo apt update
$ sudo apt install nginxatau
$ sudo yum install nginx -yMulai Nginx:
$ systemctl start nginxMulai saat boot:
$ systemctl enable nginxMenyiapkan Firewall Menggunakan FirewallD di 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 Kita dapat memeriksa apakah Nginx berjalan di sistem:
$ systemctl status nginx Baiklah, sekarang layanan Nginx telah berhasil dijalankan, kita dapat melanjutkan dan memodifikasi file konfigurasi yang ada di /etc/nginx/conf.d/default.conf . Di sinilah kita akan mengarahkan domain untuk menjalankan aplikasi React yang benar:
$ vi /etc/nginx/conf.d/default.confDi akhir file, tambahkan:
server {
listen 443 ssl ;
server_name backend1.example.com ;
...
location / {
proxy_set_header Host $http_host ;
proxy_pass http://{YOUR_IP}:3000 ;
}
}Setelah menambahkan baris berikut ke file, kita perlu me-restart layanan Nginx:
$ systemctl restart nginxMungkin tidak akan ada pesan apa pun jika layanan berhasil dimulai ulang. Jika tidak, itu akan memunculkan baris pesan kesalahan.
Ubah file ./src/server/app.js , gunakan https.createServer([options][, requestListener]) untuk membungkus layanan ekspres, silakan lihat contoh kode di bawah ini:
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` ) ) ; Untuk membedakan webpack.config.js antara pengembangan dan produksi, Anda dapat menggunakan variabel lingkungan.
Jika Anda ingin mempertimbangkan OS X dan Windows, Anda dapat menggunakan alat pihak ketiga cross-env
Langkah 1. Jalankan perintah untuk menginstal cross-env
$ npm install --save-dev cross-env Langkah 2. Selanjutnya di file package.json dalam skrip kami akan menunjukkan perintah siap pakai untuk perakitan webpack dalam versi produksi
"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 "
} Dimana melalui cross-env set variabel dan nilai NODE_ENV=xxx dan kemudian kita mendapatkan variabel ini selama eksekusi webpack
Langkah 3. Selanjutnya ke dalam file konfigurasi webpack.config.js mari kita terapkan pemeriksaan ini dari proses objek dan properti selanjutnya env ke variabel kita NODE_ENV :
if ( process . env . NODE_ENV === 'production' ) {
// .. тwe apply (or add) some kind of plugin
} Ubah templat default ./src/client/views/_html/index.html . Ini akan dibuat secara otomatis sebagai ./public/index.html . Ini berisi tag HTML yang perlu digunakan React Helm, misalnya:
<!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 > File ./public/manifest.json dibuat secara otomatis berdasarkan ./src/config/tmpl-manifest.json
Anda dapat mengonfigurasi resolusi modul dengan menambahkan tekad ke webpack.config.js . Jika Anda menggunakan jalur relatif saat mengimpor modul lain, itu akan merepotkan karena Anda harus mengetahui semua jalur relatif. Oleh karena itu, Anda bisa menambahkan alias untuk memudahkan Anda sendiri.
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 "
}
}
} Gunakan output yang ditemukan di webpack.config.js untuk mengonfigurasi pengaturan yang terkait dengan perpustakaan seperti jenis modul dan namespace.
...
const globs = {
port : 8080 ,
examples : 'public' ,
build : 'src/client' ,
dist : 'dist'
} ;
...
output : {
path : path . resolve ( __dirname , './' + globs . dist + '/js' ) ,
filename : '[name].js'
} ,
... Anda dapat memperbarui Placeholder di Templat dengan mengubah konfigurasi Info Situs package.json . Seperti ini:
{
"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 " ,
...
} Konfigurasi rute yang juga merupakan navigasi utama website (tidak termasuk konfigurasi rute Bersarang yang akan dikonfigurasi pada halaman di navigasi utama). Akses ke ./src/client/router/RoutesConfig.js .
Beberapa skrip router dapat dimodifikasi di file ./src/client/router/App.js .
Beberapa skrip di sisi server dapat dimodifikasi dalam file ./src/server/renderer.js .
Untuk menjalankan server dan aplikasi React secara bersamaan kita perlu menambahkan kunci proxy ke package.json . Kami telah mengatur server kami untuk berjalan pada port 3000, jadi arahkan proxy ke localhost:3000 .
{
"proxy" : " http://localhost:3000 " ,
...
}PropTypes untuk memeriksa jenisnya: $ npm run devKemudian, Anda dapat menggunakan kode JavaScript berikut untuk men-debugnya. Tampilkan pesan kesalahan dan peringatan di 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 ] )
}
} Aplikasi memuat beberapa perpustakaan pihak ketiga (ikon, animasi, mesin 3D, dll.) secara default, Anda dapat memuatnya sesuai kebutuhan, atau memodifikasi file konfigurasi. Akses ke ./src/client/components/_plugins/
Plug-in pihak ketiga digunakan bersama dengan komponen khusus secara default, dan Anda juga dapat menghapusnya.
Ubah direktori root website agar dapat digunakan saat Anda mengunggah proyek ke direktori lain. Ubah kunci rootDirectory dari ./src/config/websiteConfig.js .
Jika file berada di direktori root, Anda dapat membiarkannya kosong. Jika di direktori lain, Anda dapat menulis: "/blog". (tidak ada garis miring)
{
"rootDirectory" : " "
} Alamat Situs (URL) umumnya digunakan untuk optimasi SEO. Ubah siteUrl kunci dari ./src/config/websiteConfig.js . URL akan diberi nama https://domain-name.com (tanpa garis miring dan subdirektori)
{
"siteUrl" : " "
} Ubah URL API situs web. Ubah API kunci ./src/config/websiteConfig.js , seperti yang ditunjukkan di bawah ini:
{
"API" : {
"RECEIVE_DEMO_LIST" : " https://apiurl1.com " ,
"RECEIVE_DEMO_LISTDETAIL" : " https://apiurl2.com "
}
}Menemukan bug, mengirimkan permintaan penarikan, atau menyempurnakan dokumen kami - kontribusi apa pun diterima dan sangat dihargai. Untuk memulai, buka pedoman kontribusi kami. Terima kasih!
rilis
| krom | Firefox | Tepian | YAITU | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|---|
| >= 49 | >= 45 | >=14 | >=11 | >= 9 | >= 30 | >=10 | >=4.4 |
Berlisensi di bawah MIT.
