Application React (portail) - Historique des versions

Syfre : /* Configuration */

2020-09-18T07:10:42Z

Configuration

← Version précédente		Version du 18 septembre 2020 à 07:10
Ligne 37 :		Ligne 37 :

	== Configuration==		== Configuration==

			===Configuration de l'application Desktop===
			Vous pouvez utiliser le serveur HTTP de développement de l'application Desktop pour tester votre projet React.

			Pour cela, dans le concepteur de modèle :

			* Déployer les applications mobiles
			* Démarrez le serveur HTTP

			Configurez ensuite l'application React pour utilisez l'adresse du serveur de développement (http://localhost:8080/sdata/)

	===Configuration du service 1000===		===Configuration du service 1000===
			Vous pouvez utiliser un service 1000 pour tester et valider vos développement.

	Pour permettre à l'application React en cours de développement d'accéder aux APIs Sage FRP 1000 il est nécessaire d'autoriser les accès cross-origin.		Pour permettre à l'application React en cours de développement d'accéder aux APIs Sage FRP 1000 il est nécessaire d'autoriser les accès cross-origin.
Ligne 114 :		Ligne 125 :

	{{tip\|Ces variables correspondent à l'utilisation de la librairie ApiFetch.js qui encapsule l'appel à la fonction fetch() de javascritpt, voir ci-dessous}}		{{tip\|Ces variables correspondent à l'utilisation de la librairie ApiFetch.js qui encapsule l'appel à la fonction fetch() de javascritpt, voir ci-dessous}}
			{{tip\|L'url de l'API (REACT_APP_API_URL) dépend si vous développez en utilisant le serveur de développement de l'application Desktop ou un service 1000}}

	==Appel des APIs Sage FRP 1000 à partir des composants React==		==Appel des APIs Sage FRP 1000 à partir des composants React==

Syfre le 10 juillet 2020 à 09:41

2020-07-10T09:41:22Z

← Version précédente		Version du 10 juillet 2020 à 09:41
Ligne 6 :		Ligne 6 :

	* Configurez votre service 1000 pour permettre le développement de l'application		* Configurez votre service 1000 pour permettre le développement de l'application
	* ~~Créer~~ une application html dans Sage FRP 1000		* Créez une application html dans Sage FRP 1000
	* Créez un projet React.		* Créez un projet React.
	* Configurez le projet React.		* Configurez le projet React.

Syfre le 6 juillet 2020 à 07:39

2020-07-06T07:39:54Z

← Version précédente		Version du 6 juillet 2020 à 07:39
Ligne 310 :		Ligne 310 :
	</pre>		</pre>

			Voir aussi :

			* [https://github.com/sage-syfre/frp1000-htmldemoreact Projet démonstration React sur Github]]

	[[Category:Portail]]		[[Category:Portail]]
	[[Category:Applications html]]		[[Category:Applications html]]

Syfre : /* Appel des APIs Sage FRP 1000 à partir des composants React */

2020-07-06T07:27:09Z

Appel des APIs Sage FRP 1000 à partir des composants React

← Version précédente		Version du 6 juillet 2020 à 07:27
Ligne 312 :		Ligne 312 :

	[[Category:Portail]]		[[Category:Portail]]
			[[Category:Applications html]]

Syfre le 6 juillet 2020 à 07:24

2020-07-06T07:24:41Z

Voir les modifications

Syfre le 4 juillet 2020 à 19:59

2020-07-04T19:59:52Z

← Version précédente		Version du 4 juillet 2020 à 19:59
Ligne 1 :		Ligne 1 :

			==Modification pour générer une application relative à index.html ==

			Dans package.json ajouter la variable homepage = ".'

			<pre>
			{
			"name": "myapp",
			"version": "0.1.0",
			"private": true,
			"homepage": ".",
			"dependencies": {
			"@testing-library/jest-dom": "^4.2.4",
			"@testing-library/react": "^9.5.0",
			"@testing-library/user-event": "^7.2.1",
			"react": "^16.13.1",
			"react-dom": "^16.13.1",
			"react-scripts": "3.4.1"
			},
			"scripts": {
			"start": "react-scripts start",
			"build": "react-scripts build",
			"test": "react-scripts test",
			"eject": "react-scripts eject"
			},
			"eslintConfig": {
			"extends": "react-app"
			},
			"browserslist": {
			"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
			],
			"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
			]
			}
			}
			</pre>

			== Modification pour copier l'application statique dans le dossier de l'application html de FRP 1000 ==

			Modifier package.json en ajoutant une section postbuild :

			<pre>
			{
			"name": "myapp",
			"version": "0.1.0",
			"private": true,
			"homepage": ".",
			"dependencies": {
			"@testing-library/jest-dom": "^4.2.4",
			"@testing-library/react": "^9.5.0",
			"@testing-library/user-event": "^7.2.1",
			"react": "^16.13.1",
			"react-dom": "^16.13.1",
			"react-scripts": "3.4.1"
			},
			"scripts": {
			"start": "react-scripts start",
			"build": "react-scripts build",
			"postbuild": "cp -r -f ./build/* /c/LocalSite900/htmls/testreact",
			"test": "react-scripts test",
			"eject": "react-scripts eject"
			},
			"eslintConfig": {
			"extends": "react-app"
			},
			"browserslist": {
			"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
			],
			"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
			]
			}
			}
			</pre>

			== Modification pour gérer des variables d'environnement pour configurer l'application==

			Par exemple, pour définir des URLs d'API différentes en production et développement

			Créer un fichier ".env.development" et un fichier ".env.production" à la racine de l'application React

			<pre>
			REACT_APP_NOT_SECRET_CODE=Sage FRP 1000 (development)
			</pre>

			<pre>
			REACT_APP_NOT_SECRET_CODE=Sage FRP 1000 (production)
			</pre>

			Remarque: les nom de variables doivent commencer par RACT_APP_

			Dans un composant React tester la variable d'environnement :

			<pre>
			import React from 'react';
			import logo from './logo.svg';
			import './App.css';

			function App() {
			return (
			<div className="App">
			<header className="App-header">
			<img src={logo} className="App-logo" alt="logo" />
			<p>
			Edit <code>src/App.js</code> and save to reload.
			</p>
			<a
			className="App-link"
			href="https://reactjs.org"
			target="_blank"
			rel="noopener noreferrer"
			>
			Learn React for {process.env.REACT_APP_NOT_SECRET_CODE}
			</a>
			</header>
			</div>
			);
			}
			export default App;
			</pre>

	[[Category:Portail]]		[[Category:Portail]]
	[[Category:Latest]]		[[Category:Latest]]

Syfre : Page créée avec « Category:Portail Category:Latest »

2020-07-04T19:46:58Z

Page créée avec « Category:Portail Category:Latest »

Nouvelle page

[[Category:Portail]]
[[Category:Latest]]