Application React (portail) - Historique des versions

Syfre : /* Configuration */

2020-09-18T07:10:42Z

Configuration

Syfre le 10 juillet 2020 à 09:41

2020-07-10T09:41:22Z

Syfre le 6 juillet 2020 à 07:39

2020-07-06T07:39:54Z

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

Syfre le 6 juillet 2020 à 07:24

2020-07-06T07:24:41Z

Modifications en cours

Syfre le 4 juillet 2020 à 19:59

2020-07-04T19:59:52Z

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]]

@@ Ligne 37 : / Ligne 37 : @@
 == Configuration==
 ===Configuration du service 1000===
 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}}
 ==Appel des APIs Sage FRP 1000 à partir des composants React==

@@ Ligne 6 : / Ligne 6 : @@
 * 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.
 * Configurez le projet React.

@@ Ligne 310 : / Ligne 310 : @@
 </pre>
 [[Category:Portail]]
 [[Category:Applications html]]

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

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

← 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]]