ReactJS è una potente libreria JavaScript open source front-end utilizzata per creare l'interfaccia utente e i relativi componenti. È gestito da Facebook e dalla comunità di sviluppatori. ReactJS può essere utilizzato nello sviluppo di applicazioni Web o app mobili.
In questo tutorial, ti mostreremo come installare ReactJS sul tuo server Ubuntu 20.04.
Prerequisiti
- Un VPS Ubuntu 20.04 con accesso root abilitato o un utente con privilegi Sudo.
- 4 GB di RAM (minimo 2 GB)
- 10 GB di spazio libero
Passaggio 1:accedi tramite SSH e aggiorna il tuo sistema
Innanzitutto, dovrai accedere al tuo server Ubuntu 20.04 tramite SSH come utente root:
ssh root@IP_Address -p Port_number
Dovrai sostituire "IP_Address" e "Port_number" con il rispettivo indirizzo IP e numero di porta SSH del tuo server. Inoltre, se necessario, sostituisci "root" con il nome utente sudo.
Devi assicurarti che tutti i pacchetti del sistema operativo Ubuntu installati sul server siano aggiornati. Esegui i seguenti comandi per aggiornare tutti i pacchetti installati sul tuo server:
apt-get update apt-get upgrade
Passaggio 2. Installa Nodejs e NPM
Innanzitutto, devi installare NodeJS poiché un'applicazione ReactJS può essere eseguita solo se NodeJS è installato sul tuo server. Node.js è un ambiente di runtime JavaScript open source e multipiattaforma basato sul motore JavaScript V8 di Chrome.
Il modo più semplice e veloce per installare Node.js e npm è installarli dal repository predefinito di Ubuntu.
Per impostazione predefinita, l'ultima versione di Node.js non è disponibile nel repository predefinito di Ubuntu 20.04. Quindi dovrai aggiungere il repository ufficiale di Node.js al tuo sistema.
Aggiungi il repository Node.js con il seguente comando:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
E installa Node.js dai repository aggiunti eseguendo il seguente comando:
sudo apt-get install nodejs
Una volta installato NodeJS, puoi verificare la versione installata di Node.js con il seguente comando:
node -v
Dovresti ottenere il seguente output:
v14.17.1
Una volta installato Node.js, aggiorna NPM all'ultima versione utilizzando il comando seguente:
npm install npm@latest -g
Ora puoi verificare la versione di npm con il seguente comando:
npm -v
Dovresti ottenere il seguente output:
7.19.0
Passaggio 3. Installa lo strumento Create-React-App
Ora installa l'create-react-app strumento utilizzando NPM. Questo strumento aiuta a impostare tutti gli strumenti necessari per creare un nuovo progetto in React.
npm install -g create-react-app
Controlla la versione con:
create-react-app --version
Dovresti ottenere il seguente output:
4.0.3
Fase 4:crea la tua applicazione ReactJS
Puoi creare la tua applicazione ReactJS con il seguente comando:
create-react-app my-project
Al termine dell'installazione, dovresti vedere il seguente output:
Success! Created my-project at /root/my-project Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd my-project npm start Happy hacking!
Una volta creato il tuo progetto, cambia la directory nell'applicazione ReactJS:
cd my-project
Ora devi avviare la tua applicazione ReactJS con il seguente comando:
npm start
Dovresti ottenere il seguente output:
Compiled successfully! You can now view my-project in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.101:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Per impostazione predefinita, l'applicazione ReactJS viene avviata sulla porta 3000.
Passaggio 5:crea un file di servizio Systemd per l'app ReactJS
Successivamente, è necessario creare un file di servizio systemd per gestire il servizio ReactJS. Puoi crearlo con il seguente comando:
nano /lib/systemd/system/reactjs.service
Aggiungi le seguenti righe:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/my-project ExecStart=npm start -- --port=3000
Salva e chiudi il file, quindi ricarica il servizio systemd con il seguente comando:
systemctl daemon-reload
Quindi, avvia il servizio ReactJS e abilitalo all'avvio al riavvio del sistema con il seguente comando:
systemctl start reactjs systemctl enable reactjs
Puoi verificare lo stato del servizio ReactJS con il seguente comando:
systemctl status reactjs
Dovresti ottenere il seguente output:
● reactjs.service Loaded: loaded (/lib/systemd/system/reactjs.service; static; vendor preset: enabled) Active: active (running) Main PID: 66390 (npm start --por) Tasks: 30 (limit: 2248) Memory: 188.7M CGroup: /system.slice/reactjs.service ├─66390 npm start --port=3000 ├─66401 sh -c react-scripts start "--port=3000" ├─66402 node /root/my-project/node_modules/.bin/react-scripts start --port=3000 └─66409 /usr/bin/node /root/my-project/node_modules/react-scripts/scripts/start.js --port=3000
Passaggio 6:accedi all'interfaccia utente Web di ReactJS
Ora apri il tuo browser web e digita l'URL http://indirizzo-ip-del-tuo-server . Dovresti vedere la tua applicazione ReactJS nella schermata seguente:
Congratulazioni! hai installato con successo l'app ReactJS su Ubuntu 20.04.
Ovviamente, non devi installare ReactJS su Ubuntu se utilizzi uno dei nostri servizi di hosting gestito, nel qual caso puoi semplicemente chiedere ai nostri esperti amministratori Linux di installarlo per te. Sono disponibili 24 ore su 24, 7 giorni su 7 e si prenderanno immediatamente cura della tua richiesta.
PS . Se ti è piaciuto questo post su come installare ReactJS su Ubuntu, condividilo con i tuoi amici sui social network utilizzando i pulsanti a sinistra o semplicemente lascia una risposta qui sotto. Grazie.