Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Relecture de commands.md #19

Merged
merged 2 commits into from
Sep 28, 2017
Merged

Relecture de commands.md #19

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d90a2c2
Review commands.md
MachinisteWeb Sep 28, 2017
eff5a57
Revue de @forresst
MachinisteWeb Sep 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 43 additions & 47 deletions en/guide/commands.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
---
title: Commands and Deployment
description: Nuxt.js comes with a set of useful commands, both for development and production purpose.
title: Commandes et déploiement
description: Nuxt.js est livré avec un ensemble de commandes utiles, tant pour le développement que pour la production.
---

> Nuxt.js comes with a set of useful commands, both for development and production purpose.
> Nuxt.js est livré avec un ensemble de commandes utiles, tant pour le développement que pour la production.

## List of Commands
## Liste des commandes

| Command | Description |
|-----------------|--------------------------------------------------------------------------------------------|
| nuxt | Launch a development server on [localhost:3000](http://localhost:3000) with hot-reloading. |
| nuxt build | Build your application with webpack and minify the JS & CSS (for production). |
| nuxt start | Start the server in production mode (After running `nuxt build`). |
| nuxt generate | Build the application and generate every route as a HTML file (used for static hosting). |
| Commande | Description |
|---------------|-------------------------------------------------------------------------------------------------------------------|
| nuxt | Lancer un serveur de développement sur localhost:3000 avec du rechargement à chaud. |
| nuxt build | Créez votre application avec un serveur web et minifiez les JS & CSS (pour la production). |
| nuxt start | Démarrez le serveur en mode production (après avoir exécuté `nuxt build`). |
| nuxt generate | Créez l'application et générez toutes les routes en tant que fichiers HTML (utilisé pour l'hébergement statique). |

#### Arguments
You can use `--help` with any command to get detailed usage. Common arguments are:

- **`--config-file` or `-c`:** Specify path to `nuxt.config.js` file.
- **`--spa` or `-s`:** Runs command in SPA mode by disabling server side rendering.
Vous pouvez utiliser `--help` avec n'importe quelle commande pour obtenir des détails d'utilisation. Les arguments communs sont :

#### Using in package.json
- **`--config-file` ou `-c`:** spécifie le chemin vers le fichier `nuxt.config.js`.
- **`--spa` ou `-s`:** lance la commande en mode application monopage en désactivant le rendu côté serveur.

You should put these commands in the `package.json`:
#### Utiliser un fichier package.json

Vous devriez ajouter ces commandes au `package.json` :

```json
"scripts": {
Expand All @@ -33,34 +34,35 @@ You should put these commands in the `package.json`:
}
```

Then, you can launch your commands via `npm run <command>` (example: `npm run dev`).
Ensuite, vous pouvez lancer vos commandes via `npm run <command>` (exemple : `npm run dev`).

**PRO TIP:** To pass arguments to npm commands, you need an extra `--` after script name (example: `npm run dev -- --spa`)
<p class="Alert Alert--nuxt-green"><b>Astuce :</b> pour passer des arguments à une commande npm, vous devez utiliser un <code>--</code> supplémentaire après le nom du script (exemple : <code>npm run dev -- --spa</code>).</p>

## Development Environment
## Environnement de développement

To launch Nuxt in development mode with the hot reloading:
Pour lancer Nuxt dans le mode de développement avec le rechargement à chaud :

```bash
nuxt
// OR
// OU
npm run dev
```

## Production Deployment
## Déploiement en production

Nuxt.js lets your choose between 3 modes to deploy your application: Server Rendered, SPA or Static Generated.
Nuxt.js permet de choisir entre trois modes de déploiement pour votre application : rendu côté serveur, application monopage ou généré de manière statique.

### Server Rendered Deployment (Universal)
### Déploiement pour un rendu côté serveur (universelle)

To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and starting are separate commands:
Pour déployer, au lieu d'exécuter `nuxt`, vous voulez probablement faire d'abord la construction. Par conséquent, la construction et le démarrage sont des commandes distinctes :

```bash
nuxt build
nuxt start
```

The `package.json` like follows is recommended:
Le fichier `package.json` suivant est recommandé :

```json
{
"name": "my-app",
Expand All @@ -75,42 +77,36 @@ The `package.json` like follows is recommended:
}
```

Note: we recommend putting `.nuxt` in `.npmignore` or `.gitignore`.
Note : nous recommandons d'ajouter `.nuxt` dans `.npmignore` ou `.gitignore`.

### Static Generated Deployment (Pre Rendered)
### Déploiement pour une génération statique

Nuxt.js gives you the possibility to host your web application on any static hosting.
Nuxt.js vous offre la possibilité d'héberger votre application web sur tout hébergement statique.

To generate our web application into static files:
Pour générer votre application web en fichiers statiques :

```bash
npm run generate
```

It will create a `dist` folder with everything inside ready to be deployed on a static hosting.

If you have a project with [dynamic routes](/guide/routing#dynamic-routes), take a look at the [generate configuration](/api/configuration-generate) to tell nuxt.js how to generate these dynamic routes.
Il créera un dossier `dist` avec tout à l'intérieur prêt à être déployé sur un hébergement statique.

<div class="Alert">When generating your web application with `nuxt generate`, [the context](/api/context) given to [data()](/guide/async-data#the-data-method) and [fetch()](/guide/vuex-store#the-fetch-method) will not have `req` and `res`.</div>
Si vous avez un projet avec des [routes dynamiques](/guide/routing#dynamic-routes), regardez la [configuration de la commande generate](/api/configuration-generate) afin de dire à Nuxt.js comment générer ces routes dynamiques.

### Single Page Application Deployment (SPA)
<div class="Alert">Lors de la génération de votre application web avec `nuxt generate`, [le contexte](/api/context) donné à [data()](/guide/async-data#la-m-thode-data) et [fetch()](/guide/vuex-store#la-m-thode-fetch) n'aura pas de `req` et `res`.</div>

`nuxt generate` still needs SSR engine during build/generate time
While having the pro that all of our pages are pre rendered and having a high SEO and page load score,
the content is generated at *build time*. For example, we can't use it for applications
where content depends on user authentication or a real time API (at least for the first load).
### Déploiement pour une application monopage (SPA)

The SPA idea is simple! When spa mode is enabled using `mode: 'spa'` or `--spa` flag and we run build,
generation automatically starts after the build, but this time without pages content and only common meta and resource links.
`nuxt generate` a toujours besoin du SSR pendant le temps de génération afin de prérendre nos pages dans le but d'obtenir un chargement de page rapide et du contenu solide pour la SEO. Le contenu est généré lors de la *phase de build*. Il ne faut pas l'utiliser, par exemple, pour les applications ou le contenu dépend de l'authentification de l'utilisateur ou pour une API en temps réel (du moins pour le premier chargement).

So for an SPA deployment:
- Change `mode` in `nuxt.config.js` to `spa`
- Run `npm run build`
- Deploy the created `dist/` folder to your static hosting like surge or github pages or nginx.
L'idée de l'application monopage est simple ! Quand le mode SPA est activé en utilisant `mode: 'spa'` ou l'option `--spa`, la génération se lance automatiquement après le build mais cette fois sans contenu de page et seulement avec les meta, ressources et liens communs.

Another possible deployment is that we can use nuxt as a middleware in frameworks while mode is `spa`.
This helps reduce server loads and using nuxt in projects where SSR is not possible.
Donc pour un déploiement en mode SPA :

- Changez le `mode` dans `nuxt.config.js` pour `spa`.
- Lancez `npm run build`.
- Déployez le dossier `dist/` créé sur votre hébergement statique comme Surge, GitHub Pages ou nginx.

<div class="Alert">See [FAQ/Deployments](/faq/heroku-deployment) for examples of deployment to popular hosts.</div>
Une autre possibilité de déploiement est que nous pouvons utiliser Nuxt comme un middleware dans des frameworks si le mode est `spa`. Ceci aide à réduire le temps de chargement et à utiliser Nuxt dans des projets ou le SSR n'est pas possible.

<div class="Alert">Consultez [Comment déployer sur Heroku ?](/faq/heroku-deployment) pour un exemple de déploiement sur des hébergements populaires.</div>