One place for hosting & domains

      How To Deploy a Django App on App Platform


      The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      Django is a powerful web framework that allows you to deploy your Python applications or websites. Django includes many features such as authentication, a custom database ORM (Object-Relational Mapper), and an extensible plugin architecture. Django simplifies the complexities of web development, allowing you to focus on writing code.

      In this tutorial, you’ll configure a Django project and deploy it to DigitalOcean’s App Platform using GitHub.

      Prerequisites

      To complete this tutorial, you’ll need:

      Step 1 — Creating a Python Virtual Environment for your Project

      Before you get started, you need to set up our Python developer environment. You will install your Python requirements within a virtual environment for easier management.

      First, create a directory in your home directory that you can use to store all of your virtual environments:

      Now create your virtual environment using Python:

      • python3 -m venv ~/.venvs/django

      This will create a directory called django within your .venvs directory. Inside, it will install a local version of Python and a local version of pip. You can use this to install and configure an isolated Python environment for your project.

      Before you install your project’s Python requirements, you need to activate the virtual environment. You can do that by typing:

      • source ~.venvs/django/bin/activate

      Your prompt should change to indicate that you are now operating within a Python virtual environment. It will look something like this: (django)user@host:~$.

      With your virtual environment active, install Django, Gunicorn, whitenoise, dj-database-url, and the psycopg2 PostgreSQL adaptor with the local instance of pip:

      • pip install django gunicorn psycopg2-binary dj-database-url

      Note: When the virtual environment is activated (when your prompt has (django) preceding it), use pip instead of pip3, even if you are using Python 3. The virtual environment’s copy of the tool is always named pip, regardless of the Python version.

      These packages do the following:

      • django - Installs the Django framework and libraries
      • gunicorn - A tool for deploying Django with a WSGI
      • dj-database-url - A Django tool for parsing a database URL
      • psycopg2 - A PostgreSQL adapter that allows Django to connect to a PostgreSQL database

      Now that you have these packages installed, you will need to save these requirements and their dependencies so App Platform can install them later. You can do this using pip and saving the information to a requirements.txt file:

      • pip freeze > requirements.txt

      You should now have all of the software needed to start a Django project. You are almost ready to deploy.

      Step 2 — Creating the Django Project

      Create your project using the django-admin tool that was installed when you installed Django:

      • django-admin startproject django_app

      At this point, your current directory (django_app in your case) will have the following content:

      • manage.py: A Django project management script.
      • django_app/: The Django project package. This should contain the __init__.py, settings.py, urls.py, asgi.py, and wsgi.py files.

      This directory will be the root directory of your project and will be what we upload to GitHub. Navigate into this directory with the command:

      Let’s adjust some settings before deployment.

      Adjusting the Project Settings

      Now that you’ve created a Django project, you’ll need to modify the settings to ensure it will run properly in App Platform. Open the settings file in your text editor:

      • nano django_app/settings.py

      Let’s examine our configuration one step at a time.

      Reading Environment Variables

      First, you need to add the os import statement to be able to read environment variables:

      django_app/settings.py

      import os
      

      Setting the Secret Key

      Next, you need to modify the SECRET_KEY directive. This is set by Django on the initial project creation and will have a randomly generated default value. It is unsafe to keep this hardcoded value in the code once it’s pushed to GitHub, so you should either read this from an environment variable or generate it when the application is started. To do this, add the following import statement at the top of the settings file:

      django_app/settings.py

      from django.core.management.utils import get_random_secret_key
      

      Now modify the SECRET_KEY directive to read in the value from the environment variable DJANGO_SECRET_KEY or generate the key if it does not find said environment variable:

      django_app/settings.py

      SECRET_KEY = os.getenv("DJANGO_SECRET_KEY", get_random_secret_key())
      

      Warning: If you don’t set this environment variable, then every time the app is re-deployed, this key will change. This can have adverse effects on cookies and will require users to log in again every time this key changes. You can generate a key using an online password generator.

      Setting Allowed Hosts

      Now locate the ALLOWED_HOSTS directive. This defines a list of the server’s addresses or domain names that may be used to connect to the Django instance. Any incoming request with a Host header that is not in this list will raise an exception. Django requires that you set this to prevent a certain class of security vulnerability.

      In the square brackets, list the IP addresses or domain names that are associated with your Django server. Each item should be listed in quotations with entries separated by a comma. If you wish requests for an entire domain and any subdomains, prepend a period to the beginning of the entry.

      App Platform supplies you with a custom URL as a default and then allows you to set a custom domain after you have deployed the application. Since you won’t know this custom URL until you have deployed the application, you should attempt to read the ALLOWED_HOSTS from an environment variable, so App Platform can inject this into your app when it launches.

      We’ll cover this process more in-depth in a later section. But for now, modify your ALLOWED_HOSTS directive to attempt to read the hosts from an environment variable. The environment variable can be set to either a single host or a comma-delimited list:

      django_app/settings.py

      ALLOWED_HOSTS = os.getenv("DJANGO_ALLOWED_HOSTS", "127.0.0.1,localhost").split(",")
      

      Setting the Debug Directive

      Next you should modify the DEBUG directive so that you can toggle this by setting an environment variable:

      django_app/settings.py

      DEBUG = os.getenv("DEBUG", "False") == "True"
      

      Here you used the getenv method to check for an environment variable named DEBUG. If this variable isn’t found, we should default to False for safety. Since environment variables will be read in as strings from App Platform, be sure to make a comparison to ensure that your variable is evaluated correctly.

      Setting the Development Mode

      Now create a new directive named DEVELOPMENT_MODE that will also be set as an environment variable. This is a helper variable that you will use to determine when to connect to your Postgres database and when to connect to a local SQLite database for testing. You’ll use this variable later when setting up the database connection:

      django_app/settings.py

      DEVELOPMENT_MODE = os.getenv("DEVELOPMENT_MODE", "False") == "True"
      

      Configuring Database Access

      Next, find the section that configures database access. It will start with DATABASES. The configuration in the file is for a SQLite database. App Platform allows you to create a PostgreSQL database for our project, so you need to adjust the settings to be able to connect to it.

      Warning: If you don’t change these settings and continue with the SQLite DB, your database will be erased after every new deployment. App Platform doesn’t maintain the disk when re-deploying applications, and your data will be lost.

      Change the settings with your PostgreSQL database information. You’ll read in the database connection information and credentials from an environment variable, DATABASE_URL, that will be provided by App Platform. Use the psycopg2 adaptor we installed with pip to have Django access a PostgreSQL database. You’ll use the dj-database-url package that was installed to get all of the necessary information from the database connection URL.

      To facilitate with development of your application locally, you’ll also use an if statement here to determine if DEVELOPMENT_MODE is set to True and which database should be accessed. By default, this will be set to False, and it will attempt to connect to a PostgreSQL database. You also don’t want Django attempting to make a database connection to the PostgreSQL database when attempting to collect the static files, so you’ll write an if statement to examine the command that was executed and not connect to a database if you determine that the command given was collectstatic. App Platform will automatically collect static files when the app is deployed.

      First, install the sys library so you can determine the command that was passed to manage.py and the dj_database_url library to be able to parse the URL passed in:

      django_app/settings.py

      . . .
      import os
      import sys
      import dj_database_url
      

      Next remove the current DATABASE directive block and replace it with this:

      django_app/settings.py

      if DEVELOPMENT_MODE is True:
          DATABASES = {
              "default": {
                  "ENGINE": "django.db.backends.sqlite3",
                  "NAME": os.path.join(BASE_DIR, "db.sqlite3"),
              }
          }
      elif len(sys.argv) > 0 and sys.argv[1] != 'collectstatic':
          if os.getenv("DATABASE_URL", None) is None:
              raise Exception("DATABASE_URL environment variable not defined")
          DATABASES = {
              "default": dj_database_url.parse(os.environ.get("DATABASE_URL")),
          }
      
      

      Next, move down to the bottom of the file and add a setting indicating where the static files should be placed. When your Django app is deployed to App Platform, python manage.py collectstatic will be run automatically. Set the route to match the STATIC_URL directive in the settings file:

      django_app/settings.py

      . . .
      STATIC_URL = "/static/"
      STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
      

      Note: If you plan on storing static files in other locations outside of your individual Django-app static files, you will need to add an additional directive to your settings file. This directive will specify where to find these files. Be aware that these directories cannot share the same name as your STATIC_ROOT:

      django_app/settings.py

      . . .
      STATIC_URL = "/static/"
      STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
      STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"))
      

      Reviewing the Completed settings.py File

      Your completed file will look like this:

      from django.core.management.utils import get_random_secret_key
      from pathlib import Path
      import os
      import sys
      import dj_database_url
      
      # Build paths inside the project like this: BASE_DIR / 'subdir'.
      BASE_DIR = Path(__file__).resolve().parent.parent
      
      
      # Quick-start development settings - unsuitable for production
      # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
      
      # SECURITY WARNING: keep the secret key used in production secret!
      SECRET_KEY = os.getenv("DJANGO_SECRET_KEY", get_random_secret_key())
      
      # SECURITY WARNING: don't run with debug turned on in production!
      DEBUG = os.getenv("DEBUG", "False") == "True"
      
      ALLOWED_HOSTS = os.getenv("DJANGO_ALLOWED_HOSTS", "127.0.0.1,localhost").split(",")
      
      
      # Application definition
      
      INSTALLED_APPS = [
          'django.contrib.admin',
          'django.contrib.auth',
          'django.contrib.contenttypes',
          'django.contrib.sessions',
          'django.contrib.messages',
          'django.contrib.staticfiles',
      ]
      
      MIDDLEWARE = [
          'django.middleware.security.SecurityMiddleware',
          'django.contrib.sessions.middleware.SessionMiddleware',
          'django.middleware.common.CommonMiddleware',
          'django.middleware.csrf.CsrfViewMiddleware',
          'django.contrib.auth.middleware.AuthenticationMiddleware',
          'django.contrib.messages.middleware.MessageMiddleware',
          'django.middleware.clickjacking.XFrameOptionsMiddleware',
          "whitenoise.middleware.WhiteNoiseMiddleware",
      ]
      
      ROOT_URLCONF = 'masons_django_app.urls'
      
      TEMPLATES = [
          {
              'BACKEND': 'django.template.backends.django.DjangoTemplates',
              'DIRS': [],
              'APP_DIRS': True,
              'OPTIONS': {
                  'context_processors': [
                      'django.template.context_processors.debug',
                      'django.template.context_processors.request',
                      'django.contrib.auth.context_processors.auth',
                      'django.contrib.messages.context_processors.messages',
                  ],
              },
          },
      ]
      
      WSGI_APPLICATION = 'masons_django_app.wsgi.application'
      
      
      # Database
      # https://docs.djangoproject.com/en/3.1/ref/settings/#databases
      DEVELOPMENT_MODE = os.getenv("DEVELOPMENT_MODE", "False") == "True"
      
      if DEVELOPMENT_MODE is True:
          DATABASES = {
              "default": {
                  "ENGINE": "django.db.backends.sqlite3",
                  "NAME": os.path.join(BASE_DIR, "db.sqlite3"),
              }
          }
      elif len(sys.argv) > 0 and sys.argv[1] != 'collectstatic':
          if os.getenv("DATABASE_URL", None) is None:
              raise Exception("DATABASE_URL environment variable not defined")
          DATABASES = {
              "default": dj_database_url.parse(os.environ.get("DATABASE_URL")),
          }
      
      
      # Password validation
      # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
      
      AUTH_PASSWORD_VALIDATORS = [
          {
              'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
          },
          {
              'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
          },
          {
              'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
          },
          {
              'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
          },
      ]
      
      
      # Internationalization
      # https://docs.djangoproject.com/en/3.1/topics/i18n/
      
      LANGUAGE_CODE = 'en-us'
      
      TIME_ZONE = 'UTC'
      
      USE_I18N = True
      
      USE_L10N = True
      
      USE_TZ = True
      
      
      # Static files (CSS, JavaScript, Images)
      # https://docs.djangoproject.com/en/3.1/howto/static-files/
      
      STATIC_URL = "/static/"
      STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
      STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
      STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
      

      Save and close settings.py.

      You’ve now finished configuring your Django app to run on App Platform. Next, you’ll push the app to GitHub and deploy it to App Platform.

      Step 3 — Pushing the Site to GitHub

      DigitalOcean App Platform deploys your code from GitHub repositories, so the first thing you’ll need to do is get your site in a git repository and then push that repository to GitHub.

      First, initialize your Django project as a git repository:

      When you work on your Django app locally, certain files get added that are unnecessary for deployment. Let’s exclude that directory by adding it to Git’s ignore list. Create a new file called .gitignore:

      Now add the following code to the file:

      .gitignore

      db.sqlite3
      *.pyc
      

      Save and close the file.

      Now execute the following command to add files to your repository:

      • git add django_app/ manage.py requirements.txt static/

      Make your initial commit:

      • git commit -m "Initial Django App"

      Your files will commit:

      Output

      [master (root-commit) eda5d36] Initial Django App 8 files changed, 238 insertions(+) create mode 100644 django_app/__init__.py create mode 100644 django_app/asgi.py create mode 100644 django_app/settings.py create mode 100644 django_app/urls.py create mode 100644 django_app/wsgi.py create mode 100644 manage.py create mode 100644 requirements.txt create mode 100644 static/README.md

      Open your browser and navigate to GitHub, log in with your profile, and create a new repository called django-app. Create an empty repository without a README or license file.

      Once you’ve created the repository, return to the command line to push your local files to GitHub.

      First, add GitHub as a remote repository:

      • git remote add origin https://github.com/your_username/django-app

      Next, rename the default branch main, to match what GitHub expects:

      Finally, push your main branch to GitHub’s main branch:

      Your files will transfer:

      Output

      Enumerating objects: 12, done. Counting objects: 100% (12/12), done. Delta compression using up to 8 threads Compressing objects: 100% (9/9), done. Writing objects: 100% (12/12), 3.98 KiB | 150.00 KiB/s, done. Total 12 (delta 1), reused 0 (delta 0) remote: Resolving deltas: 100% (1/1), done. To github.com:yourUsername/django-app.git * [new branch] main -> main Branch 'main' set up to track remote branch 'main' from 'origin'.

      Enter your GitHub credentials when prompted to push your code.

      Your code is now on GitHub and accessible through a web browser. Now you will deploy your site to DigitalOcean’s App Platform.

      Step 4 — Deploying to DigitalOcean with App Platform

      Once the code is pushed, visit https://cloud.digitalocean.com/apps and click Launch Your App. You’ll be prompted to connect your GitHub account:

      Connect GitHub account

      Connect your account and allow DigitalOcean to access your repositories. You can choose to let DigitalOcean have access to all of your repositories or just to the ones you wish to deploy.

      Allow repository access

      Click Install and Authorize. You’ll be returned to your DigitalOcean dashboard to continue creating your app.

      Once your GitHub account is connected, select the your_account/django-app repository and click Next.

      Choose your repository

      Next, provide your app’s name, choose a region, and ensure the main branch is selected. Then ensure that Autodeploy code changes is checked. Click Next to continue.

      Choose a name, region, and branch

      DigitalOcean will detect that your project is a Python app and will automatically populate a partial run command.

      Python Application detected and partial run command populated

      Click the Edit link next to the Build and Run commands to complete the build command. Your completed build command needs to reference your project’s WSGI file. In this example, this is at django_app.wsgi. Your completed run command should be gunicorn --worker-tmp-dir /dev/shm django_app.wsgi.

      Completing the run command

      Next, you need to define the environment variables you declared in your project’s settings. App Platform has a concept of App-Wide Variables, which are environment variables that are provided by App Platform, such as APP_URL and APP_DOMAIN. The platform also maintains Component-Specific Variables, which are variables that are exported from your components. These will be useful for determining your APP_DOMAIN beforehand so you can properly set DJANGO_ALLOWED_HOSTS. You will also use these variables to copy configuration settings from your database.

      To read more about these different variables, consult the App Platform Environment Variable Documetation

      For your Django app to function, you need to set the following environment variables like so:

      • DJANGO_ALLOWED_HOSTS -> ${APP_DOMAIN}
        • This allows us to know the randomly generated URL that App Platform provides and provide it to our app
      • DATABASE_URL -> ${<NAME_OF_YOUR_DATABASE>.DATABASE_URL}
        • In this case, we’ll name our database db in the next step, so this should be ${db.DATABASE_URL}
      • DEBUG -> True
        • Set this to True for now to verify your app is functioning and set to False when it’s time for this app to be in production
      • DJANGO_SECRET_KEY -> <A RANDOM SECRET KEY>
        • You can either allow your app to generate this at every launch or pick a strong password with at least 32 characters to use as this key. Using a secure password generator is a good option for this
        • Don’t forget to click the Encrypt check box to ensure that your credentials are encrypted for safety

      Set environment variables

      To set up your database, click the Add a Database button. You will be presented with the option of selecting a small development database or integrating with a managed database elsewhere. For this deployment, select the development database and ensure that the name of the database is db. Once you’ve verified this, click the Add Database button.

      Add a database

      Click Next, and you’ll be directed to the Finalize and Launch screen where you’ll choose your plan. Be sure to select the appropriate plan to fit your needs, whether in Basic App or Professional App and then click Launch App at the bottom. Your app will build and deploy:

      App building and deploying

      Once the build process completes, the interface will show you a healthy site. Now you need to access your app’s console through the Console tab and perform the Django first launch tasks by running the following commands:

      • python manage.py migrate - This will perform your initial database migrations.
      • python manage.py createsuperuser - This will prompt you for some information to create an administrative user

      Perform initial Django tasks

      Once you are done with that, click on the link to your app provided by App Platform:

      Click on app link

      This link should take you to the standard initial Django page.

      Initial Django Page

      And now you have a Django app deployed to App Platform. Any changes that you make and push to GitHub will be automatically deployed.

      Step 5 — Deploying Your Static Files

      Now that you’ve deployed your app, you may notice that your static files aren’t being loaded if you have DEBUG set to False. Django doesn’t serve static files in production and instead wants you to deploy them using a web server or CDN. Luckily, App Platform can do just that. App Platform provides free static asset serving if you are running a service alongside it, as you are doing with your app. So you’re going to deploy your same Django app but as a static site this time.

      Once your app is deployed, add a static site component from the Components tab in your app.

      Add Static Site

      Select the same GitHub repository as your deployed Django service. Click Next to continue.

      Select GitHub Repo

      Next, provide your app’s name and ensure the main branch is selected. Click Next to continue.

      Set Static Site Name and Branch

      Your component will be detected as a Service, so you’ll want to change the type to Static Site. Essentially we’ll have Django gather our static files and serve them. Set the route to what you set your STATIC_URL directive in your settings file. We set our directive to /static/ so set the route to /static. Finally, your static files will be collected into Output Directory in your app to match your STATIC_ROOT setting in settings.py. Yours is set to staticfiles, so set Output Directory to that.

      Static Site Settings

      Click Next, and you’ll be directed to the Finalize and Launch screen. When static files are paired with a service, it is free, so you won’t see any change in your bill. Click Launch App and deploy your static files. Now, if you have Debug set to False, you’ll see your static files properly displayed. Note that this tutorial’s only static asset is a README.md file. You will likely have more than this.

      Conclusion

      In this tutorial, you set up a Django project and deployed it using DigitalOcean’s App Platform. Any changes you commit and push to your repository will be re-deployed, so you can now expand your application. You can find the example code for this tutorial in the DigitalOcean Sample Images Repository

      The example in this tutorial is a minimal Django project. Your app might have more applications and features, but the deployment process will be the same.



      Source link

      Comment activer le rendu côté serveur d’une app React


      Introduction

      Le rendu côté serveur (SSR) est une technique couramment utilisée pour obtenir un rendu d’une application simple page (SPA) côté client sur le serveur et que cette page soit renvoyée au client avec un rendu complet. Cette technique permet de présenter les composants dynamiques sous forme de balise HTML.

      Cette approche peut vous être utile dans le cadre de l’optimisation des moteurs de recherche (SEO) lorsque l’indexation ne traite pas correctement JavaScript. Elle peut également s’avérer être très pratique si la lenteur du réseau vient altérer le téléchargement d’un grand paquet JavaScript.

      Au cours de ce tutoriel, vous allez initialiser une app React en utilisant Create React App. Ensuite, vous modifierez le projet pour activer le rendu côté serveur.

      À la fin de ce tutoriel, vous disposerez d’un projet actif avec une application React côté client et une application Express côté serveur.

      Remarque : vous pouvez également envisager d’utiliser l’approche moderne proposée par Next.js qui vous permet de créer des applications statiques et serveurs développées avec React.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      Les vérifications effectuées sur ce tutoriel ont été réalisées avec Node v14.4.0 et npm v6.14.5.

      Étape 1 — Création de l’app React et modification du composant de l’app

      Dans un premier lieu, nous allons utiliser npx pour lancer une nouvelle app React en utilisant la dernière version de Create React App.

      Appelons notre app my-ssr-app :

      • npx create-react-app@3.4.1 my-ssr-app

      Ensuite, nous la copions (cd) dans le nouveau répertoire :

      cd my-ssr-app
      

      Pour finir, nous pouvons lancer notre nouvelle app côté client afin d’en vérifier l’installation :

      Vous devriez voir apparaître un exemple d'affichage de l'app React dans la fenêtre de votre navigateur.

      Maintenant, créons un composant <Home> :

      Ensuite, ajoutons le code suivant au fichier Home.js :

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Cela créera un titre <h1> accompagné d'un message « Bonjour » adressé à un nom.

      Ensuite, nous allons permettre le rendu de <Home> dans le composant <App>. Ouvrez le fichier App.js :

      Maintenant, remplacez les lignes de code existantes par les nouvelles lignes de code suivantes :

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Cela transmet un name au composant <Home> de manière à ce que le message suivant s'affiche  :« Bonjour Sammy ! ».

      Dans le fichier index.js de notre app, nous allons utiliser la méthode d’hydratation de ReactDOM au lieu du rendu. Nous indiquons ainsi au moteur de rendu DOM que nous allons réhydrater l'app une fois qu'un rendu sera obtenu côté serveur.

      Ouvrez le fichier index.js :

      Ensuite, remplacez le contenu du fichier index.js par le code suivant :

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Vous venez de terminer la configuration côté client. Nous pouvons maintenant passer à celle du côté serveur.

      Étape 2 — Création d'un serveur Express et rendu du composant de l'app

      Maintenant que notre app est installée, créons un serveur qui enverra une version rendue. Nous utiliserons Express for our server. Ajoutez-le au projet en saisissant la commande suivante dans la fenêtre de votre terminal :

      • npm install express@4.17.1

      Ou, en utilisant yarn :

      Maintenant, créez un répertoire server à côté du répertoire src de l'app :

      Créez un nouveau fichier index.js qui contiendra le code du serveur Express :

      Ajoutez les importations nécessaires et définissez les quelques constantes suivantes :

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      Ensuite, ajoutez le code du serveur avec un traitement des erreurs :

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Comme vous le voyez, nous pouvons importer notre composant <App> de l'app client directement depuis le serveur.

      Il se passe trois choses importantes à ce stade :

      • Nous indiquons à Express de desservir le contenu du répertoire build sous forme de fichiers statiques.
      • Nous utilisons une méthode de ReactDOMServer, renderToString pour obtenir un rendu de notre app sur une chaîne HTML statique.
      • Ensuite, nous lisons le fichier statique index.html de l'app client créée, nous injectons le contenu statique de notre app dans le <div> avec un id « root » et envoyons cela sous forme de réponse à la requête.

      Étape 3 — Configuration des scripts Webpack, Babel et npm

      Pour que notre code serveur fonctionne, nous devons le grouper et le transposer, en utilisant Webpack et Babel. Pour ce faire, ajoutez les dépendances de dév. au projet en saisissant la commande suivante dans la fenêtre de votre terminal :

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      Ou, en utilisant yarn :

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Remarque : une version antérieure de ce tutoriel était dédiée à l'installation de babel-core, babel-preset-env et babel-preset-react-app. Depuis, ces paquets ont été archivés et remplacés par des versions mono repo.

      Ensuite, créez un fichier de configuration Babel :

      Puis, ajoutez les préréglages de env et react-app :

      .babelrc.json

      {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ]
      }
      

      Remarque : dans une version antérieure de ce tutoriel, on utilisait un fichier .babelrc (aucune extension de fichier .json). Il s'agissait d'un fichier de configuration pour Babel 6, mais ce n'est plus le cas pour Babel 7.

      Maintenant, nous allons créer un Webpack de configuration pour le serveur qui utilise Babel Loader et pourvoir ainsi transposer le code. Commencez par créer le fichier :

      Maintenant, ajoutez les paramètres suivants au fichier webpack.server.js :

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Une fois cette configuration faite, notre bundle serveur transposé sera généré dans le dossier server-build situé dans le fichier index.js.

      Notez que l'on utilise target: 'node' et externals: [nodeExternals()] de webpack-node-externals. Cela permettra d'omettre les fichiers node_modules qui se trouvent dans le paquet et au serveur d'accéder directement à ces fichiers.

      Ceci achève l'installation de la dépendance et la configuration du Webpack et de Babel.

      Maintenant, retournons à paquet.json pour ajouter les scripts npm d'aide :

      Nous allons ajouter les scripts dev:build-server, dev:start et dev au fichier package.json pour développer et desservir facilement notre application SSR :

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Lorsque nous apportons des modifications au serveur, nous utilisons nodemon pour le redémarrer. De son côté, npm-run-all permet d'exécuter plusieurs commandes en parallèle.

      Vous pouvez maintenant procéder à l'installation de ces paquets en saisissant les commandes suivantes dans la fenêtre de votre terminal :

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      Ou, en utilisant yarn :

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Une fois que tout cela est en place, vous pouvez exécuter les éléments suivants pour développer l'app côté client, regrouper et transposer le code du serveur et lancer le serveur en utilisant :3006 :

      Ou, en utilisant yarn :

      En configurant ainsi le Webpack de notre serveur, les changements seront surveillés et le serveur redémarré à chaque fois que des modifications seront apportées. Cependant, du côté de l'app client, il faudra en créer une à chaque changement. Il s'agit ici d'un problème qui n'a pas encore été résolu.

      Maintenant, ouvrez http://localhost:3006/ dans votre navigateur web. Vous verrez que votre app est rendue côté serveur.

      Auparavant, le code source révélait ce qui suit :

      Output

      <div id="root"></div>

      Mais maintenant, avec les changements que vous avez apportés, le code source révèle ceci :

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      Le rendu côté serveur a réussi à convertir le composant <App> en HTML.

      Conclusion

      Au cours de ce tutoriel, vous avez initialisé une application React et activé le rendu côté serveur.

      Cependant, cet article n'aborde qu'une infime partie de ce qu'il est possible de faire. Les choses ont tendance à devenir un peu plus compliquées lorsque le rendu d'une app côté serveur implique un routage, la récupération de données ou Redux.

      L'un des principaux avantages de l'utilisation de SSR est que le contenu d'une app peut être analysé, même par les robots d'exploration qui n'exécutent pas de code JavaScript. Cela peut s'avérer être très pratique pour optimiser les moteurs de recherche (SEO) et alimenter les canaux des médias sociaux en métadonnées.

      Souvent, SSR pourra également vous aider à optimiser votre performance car l'app lancée sera entièrement chargée à partir du serveur à la première requête. Pour les apps non triviales, le parcours peut être quelque peu différent. En effet, la configuration de SSR peut s'avérer un peu compliquée et crée une plus grande charge sur le serveur. La décision d'utiliser un rendu côté serveur de votre app React dépend de vos besoins spécifiques et des compromis les plus pertinents pour votre utilisation.

      Si vous souhaitez en savoir plus sur React, consultez notre série Comment coder dans React.js ou consultez notre page thématique React pour des exercices et des projets de programmation.



      Source link

      Build Apps Faster With DigitalOcean App Platform


      Video

      About the Talk

      This talk builds upon the simplicity of DigitalOcean with our announcement of DigitalOcean App Platform. Come learn about this new offering and our vision to bring more Platform-as-a-Service (PaaS) capabilities to developers around the world.

      DigitalOcean has launched dozens of new products and services over the last two years using user research, hypothesis-driven development, design thinking, and agile/iterative methodologies. Learn how these can help you get your new product or service off the ground faster and with greater success.

      What You’ll Learn

      • Brief overview of DigitalOcean App Platform capabilities
      • DigitalOcean’s roadmap for PaaS
      • How to find product-market fit for your new web product/service

      Resources

      About the Presenter

      Jake Levirne is Senior Director of Product for Developer Experience at DigitalOcean. He loves working with startups and helping build products that are simple, intuitive, and that get the job done. His personal mission is to help more people realize they can build anything they want.



      Source link