Hébergez votre site Angular gratuitement en utilisant ce processus simple.
Lorsque vous hébergez un site Web angulaire en ligne, vous pouvez choisir entre de nombreuses plates-formes disponibles. L'un d'entre eux que vous pouvez utiliser gratuitement est Netlify.
Si vous stockez une copie du code source de votre site Web dans un référentiel GitHub, vous pouvez utiliser Netlify pour héberger ce site.
Netlify redéploie également automatiquement votre site lorsque vous transmettez de nouvelles modifications à la branche de référentiel que vous hébergez.
Comment créer un exemple d'application angulaire de base
Vous pouvez créer une application angulaire simple à l'aide d'un éditeur tel que Visual Studio Code. Vous pouvez ensuite héberger ce site Web en utilisant Netlify.
- Créer un nouvelle application angulaire.
- Créez une page d'accueil simple. Remplacez le code dans le app.component.html fichier avec le contenu de page de destination suivant :
<classe div="en-tête container-dark">
<h2>Notre site Web d'entreprise</h2>
</div>
<classe div="conteneur-blanc">
<classe div="contenu">
<h2>Notre site Web d'entreprise</h2>
<p>Apprenez à concevoir, développer et entretenir votre site Web professionnel en un rien de temps.</p>
</div>
</div>
<classe div="conteneur-orange">
<classe div="contenu">
<h2>Ce que nous faisons</h2>
<p>Nous vous donnons les outils pour développer des sites Web et des solutions uniques pour vos clients. Nous offrons également des formations pour
maintenance et autres sujets liés au site Web.</p>
</div>
</div>
<classe div="conteneur-blanc">
<classe div="contenu">
<h2>À propos de nous</h2>
<p>Nous sommes une petite entreprise opérant à partir de Melbourne, en Australie. Nos espaces sont conçus de manière unique afin que les clients puissent également
rendez-nous visite en personne.</p>
</div>
</div>
<classe div="pied de page sombre du conteneur">
<p>Droits d'auteur 2022</p>
</div> - Ajoutez du style à l'application Angular en ajoutant du CSS au app.component.css déposer:
* {
famille de polices: "Arial", sans empattement ;
}
.entête {
rembourrage: 30px 50px ;
}
.bas de page {
rembourrage: 5px 50px ;
aligner le texte: centrer ;
}
.container-dark {
Couleur de l'arrière plan: #202C39 ;
Couleur blanche;
affichage: flexible ;
align-items: center ;
}
.container-orange {
Couleur de l'arrière plan: #FFD091 ;
couleur: #202C39 ;
}
.container-blanc {
couleur d'arrière-plan: fumée blanche ;
couleur: #202C39 ;
}
.contenu {
rembourrage: 100px 25% ;
affichage: flexible ;
flex-direction: colonne ;
hauteur de ligne: 2 rem ;
taille de police: 1.2em;
align-items: center ;
aligner le texte: centrer ;
} - Ajoutez du style à l'ensemble de l'application Angular dans styles.css:
corps {
marge: 0 ;
rembourrage: 0 ;
} - Pour tester l'application, accédez à son dossier racine à l'aide d'un terminal ou d'une ligne de commande. Tapez le ng servir commande:
ng servir - Attendez que votre code soit compilé et visitez http://localhost: 4200/ dans un navigateur Web pour afficher votre application.
- Dans le .browserslistrc fichier, supprimez iOS Safari version 15.2-15.3. Cela empêchera les erreurs de compatibilité de s'afficher dans la console lorsque vous générez le projet.
1 dernière version de Chrome
1 dernière version de Firefox
2 dernières versions majeures d'Edge
2 dernières versions majeures de Safari
2 dernières versions majeures d'iOS
Firefox ESR
pasios_saf 15.2-15.3
passafari 15.2-15.3 - Construisez votre code à l'aide de ng construire commande dans le terminal :
ng construire - Dans le .gitignore fichier, supprimer ou commenter le /dist doubler. Le retirer assurera la distance dossier se trouve dans l'ensemble de fichiers que vous poussez vers votre référentiel GitHub.
# /dist
Comment pousser votre code angulaire vers GitHub
Vous devrez stocker votre code dans un référentiel distant pour que Netlify puisse accéder au code source.
Vous pouvez créer un nouveau référentiel sur GitHub et transférer le code de votre site Web vers ce référentiel. Si vous n'êtes pas familier avec GitHub, il peut être utile de comprendre certaines Fonctionnalités de base de GitHub d'abord.
- Créer un nouveau référentiel sur GitHub. Vous pouvez le faire en vous connectant à GitHub et en cliquant sur Nouveau.
- Entrez les détails de votre nouveau référentiel. Donnez-lui un nom tel que "netlify-app" et une description. N'initialisez pas le référentiel avec un fichier README, un fichier .gitignore ou une licence.
- Dans un terminal sur votre ordinateur, accédez au répertoire où vous avez stocké votre application Angular. Exécutez les commandes suivantes pour initialiser votre dossier en tant que dépôt git :
git init
git add .
git commettre -m "premier commettre" - Poussez le code à l'intérieur de ce dossier vers le nouveau référentiel distant que vous avez créé sur GitHub. Suivre la git remote ajouter l'original, branche git, et git pousser commandes fournies par GitHub sur votre page de référentiel distant :
git remote ajouter l'original <Votre lien de dépôt GitHub>
branche git -M principale
git push -u main d'origine - Vous pouvez confirmer que le code de votre application Angular se trouve maintenant dans votre référentiel GitHub distant en actualisant la page du référentiel GitHub.
Comment utiliser Netlify pour héberger votre code
Pour héberger votre code avec Netlify, vous devrez lui donner accès à votre code source GitHub. Netlify utilisera alors le distance dossier de votre projet Angular pour publier la version construite de votre code.
Vous pouvez configurer tous ces paramètres en suivant les étapes de configuration lors de la création d'un nouveau site :
- Connectez-vous ou inscrivez-vous pour Netlifier. Vous pouvez le faire en utilisant vos informations d'identification GitHub.
- À partir du tableau de bord principal et de la page de la liste des sites, développez Ajouter un nouveau site, et sélectionnez Importer un projet existant.
- Sélectionner GitHub.
- Cliquer sur Configurer Netlify sur GitHub.
- Cliquer sur Installer.
- Netlify affichera une liste de vos référentiels GitHub. Sélectionnez celui que vous souhaitez héberger. Par exemple, si vous avez nommé votre référentiel "netlify-app", sélectionnez "netlify-app" dans la liste.
- Dans l'écran de configuration, laissez le Propriétaire, Branche à déployer, et Répertoire de base champs à leurs valeurs par défaut. Si vous publiiez une branche spécifique, telle qu'une branche "Production" distincte, vous pouvez l'ajouter dans le Branche à déployer champ. Changer la Commande de génération champ à "ng build". Pour le Publier le répertoire champ, tapez dist/
. Si vous ne connaissez pas le nom du projet, vous pouvez naviguer jusqu'au dossier dist de votre projet pour le trouver. Par exemple, "dist/netlify-app". - Cliquer sur Déployer le site.
- Attendez que le déploiement soit terminé. Cela peut prendre quelques minutes et vous devrez peut-être actualiser la page. Si tout se passe bien, vous pourrez voir le déploiement réussi dans la liste des déploiements. Cliquez sur votre déploiement publié, par exemple, Réalisation: main@HEAD.
- Clique sur le Déploiement en production ouverte bouton.
- Vous pouvez maintenant afficher votre site Web dans un autre onglet, en utilisant une URL au format
.netlify.app. Si vous hébergez un site Web avec plusieurs redirections, vous ne pourrez peut-être pas rediriger vers d'autres pages. Dans ce cas, il existe un moyen de réparer une redirection défaillante sur Netlify. Si vous le souhaitez, vous pouvez également modifier votre nom de domaine gratuit.
Hébergement de votre site Web avec GitHub et Netlify
J'espère que vous pouvez maintenant héberger avec succès un site Web en utilisant GitHub et Netlify. Vous pouvez configurer des déploiements automatiques sur certaines branches d'un référentiel GitHub. De cette façon, vous pouvez automatiser et rationaliser le déploiement de votre site Web.
Mais Netlify n'est pas le seul moyen de déployer une application Angular en ligne. Vous pouvez également utiliser d'autres plates-formes telles que les pages GitHub.
