créer-réagir-app: comment utiliser https au lieu de http?

Je me demandais si quelqu'un sait comment utiliser le protocole https sur dev pour la 'création d'-réagir-app' environnement. Je ne vois rien à ce sujet dans le README ou rapide recherche sur google. Je veux juste le https://localhost:3000 de travail, ou d'autre https://localhost:3001.

InformationsquelleAutor Ringo | 2017-06-15

create-react-app reactjs

55

Ensemble HTTPS=true avant d'exécuter la commande de démarrage.

La Documentation

La mise en œuvre utilise le HTTPS Variable d'Environnement pour déterminer le protocole à utiliser lors du démarrage du serveur.
- J'ai essayé ce. Je suis sur Windows 10 et a couru: HTTPS=true&&npm début Cela n'a pas l'air de fonctionner. J'ai eu la console suivante message comme d'habitude: Compilé avec succès! Vous pouvez désormais afficher les x-application dans le navigateur. Local: localhost:3000 Sur Votre Réseau: 192.168.2.4:3000
- semble que votre suggestion a quelque chose à voir avec l'utilisation de proxy appels à la sécurité du serveur d'API? Je sais réagir-scripts appelle juste quelque chose comme serveur http. Je pourrais être en mesure de le comprendre en regardant la sortie
- Avez-vous tout simplement exécuter HTTPS=true&&npm start, sur windows, vous avez besoin set HTTPS=true&&npm start.
- Le HTTPS section de la documentation est après la Configuration du Proxy, mais le même en-tête de niveau. Ils sont des caractéristiques distinctes.
- Il ne demande pas http.server par lui-même, il utilise webpack-dev-server qui utilise express.
- OK, cela fonctionne maintenant. Est-il un script où je peux ajouter le HTTPS env sans avoir à les saisir à chaque fois.(Et aussi être compatible pour Mac et PC
- Sur un système unix comme Mac, vous pouvez l'exporter dans votre profil. Il y a de manière équivalente à l'échelle mondiale définir des variables d'environnement sous windows, mais je ne suis pas familier avec elle. Mais, au niveau du projet dotenv doit être initialisé avant le départ, de sorte que vous pouvez essayer d'ajouter HTTPS=true à votre .env.development
- et coll., quelqu'un a compris comment définir votre propre cert? Dans Firefox, je ne peux pas passer sur localhost en raison d'une "Le certificat n'est pas digne de confiance car il est auto-signé." erreur.
- vous devez fourche react-scripts ou eject pour le faire. Vous pouvez utiliser un modèle prédéfini cert avec webpack-dev-server, mais les scripts juste lui permettre de générer un cert. Pourquoi ne pas simplement ajouter une exception?
- Un peu en retard à la fête, mais cette montre comment définir PATH pour Java. C'est le même processus pour toutes les variables d'environnement, comme HTTPS ou NODE_ENV ou quoi avez-vous sur Windows. Vous pouvez également ouvrir l'Explorateur Windows, clic droit Ce PC, sélectionnez Propriétés, puis Paramètres Système Avancés, puis cliquez sur le Variables d'Environnement bouton... & bénéfice.
InformationsquelleAutor Steve Buzonas
16

Vous pouvez modifier votre forfait.json scripts article à lire:

"scripts": { "start": "set HTTPS=true&&react-scripts start", ... }

ou tout simplement courir set HTTPS=true&&npm start

Juste un passage, pour moi, faire ce changement casse chaud de rechargement pour une raison quelconque....

-- Note: OS === Windows 10 64 Bits
- Pour obtenir ce travail sans avoir à les saisir à chaque fois que j'ai mis dans mon colis.json, mais j'ai dû omettre le set et la && pour fonctionner sur mon iMac. donc j'ai simplement utilisé HTTPS=true react-scripts start
InformationsquelleAutor Smitty
7

En Cas de MAC/UNIX ne
```
export HTTPS=true
npm start
```
Simple ou un liner
```
export HTTPS=true&&npm start
```
Ou mise à jour de début de script dans le paquet.json à

"start": "export HTTPS=true&&PORT=3000 react-scripts start",

vous devriez être en mesure de frapper https.

InformationsquelleAutor best wishes
4

Veuillez utiliser ceci dans l'invite de commande
```
 set HTTPS=true&&npm start
```
InformationsquelleAutor Suneet Patil
3

pourriez avoir besoin d'Installer des auto-signé chaîne de CA sur le serveur et le navigateur.
La différence entre l'auto-signé de l'AC et de certificat auto-signé

InformationsquelleAutor codeislife
3

Vous pouvez également créer un fichier appelé .env à la racine de votre projet, puis d'écrire
```
HTTPS=true
```
Après cela, il suffit d'exécuter "npm démarrer" comme vous le faites habituellement pour démarrer votre application.

Docs: https://facebook.github.io/create-react-app/docs/advanced-configuration

Œuvres à la fois sur Linux et Windows, contrairement à certains autres réponses postées ici.
- C'était la réponse que je cherchais... merci.
InformationsquelleAutor wm1sr
2

set HTTPS=true&&npm start dans les scripts>début de paquet.json et s'il vous Plaît ne laissez pas d'espace entre les commandes.

Le renvoyer dans la doc officielle.
À l'aide de HTTPS dans le Développement

(Note: le manque d'espace est intentionnelle.)

InformationsquelleAutor Abhinav Kinagi
1
```
HTTPS=true npm start
```
dans le terminal a fonctionné pour moi sur Créer-Réagir-App

InformationsquelleAutor ozzy432836
1

si cela ne fonctionne toujours pas correctement à cause de "votre connexion n'est pas privée" questions (dans chrome), cela a fonctionné pour moi très bien:

https://github.com/facebook/create-react-app/issues/3441

En bref:
1. J'ai d'abord certificat exporté à partir de chrome (voir cette).
2. Le certificat importé dans Windows (à l'aide de certmgr.msc).
3. Permis chrome://flags/#allow-insécurité-localhost drapeau.
  Comment permettre à l'insécurité localhost
InformationsquelleAutor KurgerBing
0

Je ne pouvais pas obtenir que cela fonctionne (réglage HTTPS=true), au lieu de cela, j'ai utilisé

réagir-https-redirection

Un simple wrapper autour de votre App composant.

InformationsquelleAutor PatrickGoethe
0

Je pense qu'il est utile de mentionner à définir PORT=443, par défaut HTTPS port standard.
Vous pouvez éviter d'attacher :PORT à la fin de l'adresse à chaque fois.

Mon package.json est comme (testé à partir de Ubuntu Server 18.04):
```
{
  ...
  "scripts": {
    "start": "HTTPS=true PORT=443 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}
```
InformationsquelleAutor GyuHyeon Choi

Vous devez vous connecter pour publier un commentaire.