Mataburros - HackMD

# Mataburros - Recommended NodeJS version: **12.14.1** - Recommended VS Code Extensions: - **ESLint** - **Prettier** - **Path Intellisense** - **GitLens** - **ES7 React/Redux/GraphQL/React-Native snippets** ## Set up local development enviroment ### Install verdaccio Verdaccio is a npm proxy registry that is required for development. You can learn more about Verdaccio [here](https://verdaccio.org/docs/en/what-is-verdaccio) Install verdaccio executing these commands in a terminal: ```bash= npm install -g verdaccio npm set registry https://localhost:4873 ``` If installing on Windows make sure you have full permissions on the folder: *C:\user\\{username}\Appdata\roaming\npm*. If the installation fails, try - Deleting the file *C:\Users{username}\AppData\Roaming\npm\verdaccio.ps1* - Cleaning npm's cache by running `npm cache clean` - And redoing the installing process ### Configure verdaccio Update verdaccio's configuration to enable access to Swagup's registry: - Find the local verdaccio configuration file -- **Unix**: *~/.config/verdaccio/config.yaml*)' -- **Windows**: *C:\Users*\\*{username}\AppData\Roaming\verdaccio\config.yaml* - In this file, replace: ```yaml= ... uplinks: npmjs: url: https://registry.npmjs.org/ packages: '@*/*': # scoped packages access: $all publish: $authenticated proxy: npmjs ... ``` with ```yaml= ... uplinks: npmjs: url: https://registry.npmjs.org/ swagup: url: http://ec2-18-208-60-37.compute-1.amazonaws.com:4873/ packages: '@swagup/*': access: $all publish: $authenticated proxy: swagup '@*/*': # scoped packages access: $all publish: $authenticated proxy: npmjs ... ``` Execute verdaccio by running this command in a terminal: ```bash= verdaccio ``` ### Github with SSH Github's HTTPS access forces you to type your username/password during every access. Save yourself some time by using Github with SSH. Intructions are provided [**HERE**](https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) More about Github with SSH: - https://help.github.com/en/articles/changing-a-remotes-url - https://help.github.com/en/articles/testing-your-ssh-connection ### Clone project files After setting up your SSH key, clone the project executing this command in a terminal: ```bash= git clone git@github.com:swagup-com/swagupHR.git ``` ### Install project dependencies To install the project's dependencies make sure **verdaccio** is running in a separate terminal and execute this command: ```bash= npm i ``` ### Local enviroment variables It's necessary to configure the local enviroment to include some endpoints and run the project in your personal computer. Create a file named *.env.development.local* in the root folder (**swagupHR/**) and add this to the file: ```env= REACT_APP_API_ENDPOINT=https://api-staging.swagup.com/api/v1 REACT_APP_API_FORM_ENDPOINT=https://api-staging.swagup.com/form-api/v1 REACT_APP_API_PARTNERSHIPS_ENDPOINT=https://api-staging.swagup.com/partnerships-api/v1 ``` ## Git formatting guide Check out *Swagup*'s Git formatting guide [here](https://github.com/swagup-com/GitFormatGuide) ## Services You are going to need many services. This is a list of most important of them: * 1Password * Slack * Jira * Postman * Zeplin * Figma You should request access to these services at the company. You also need to request your account to access in https://dashboard-staging.swagup.com ## Running Next To execute the next project first in the folder *express_server* create a folder named *.devcerts*. You need to install openssl if you haven't. Inside the folder *.devcerts* open a terminal an run the next code: ```bash= openssl req -nodes -new -x509 -keyout server.key -out server.cert ``` Windows users might need to install the **openssl** utility before running the previous command, you can do so by following this [guide](https://tecadmin.net/install-openssl-on-windows/). For building the project you need to run: ```bash= npm run build:next ``` For run the project you need to run: ```bash= npm run start:next ``` # Mataburros (Español) - Versión de **NodeJS** recomendada: **12.14.1** - Extensiones de **VS Code** recomendadas: - **ESLint** - **Prettier** - **Path Intellisense** - **GitLens** - **ES7 React/Redux/GraphQL/React-Native snippets** ## Preparar el entorno de desarrollo local ### Instalar verdaccio Verdaccio es un registry privado y proxy para npm. Puedes leer más sobre Verdaccio [aquí](https://verdaccio.org/docs/en/what-is-verdaccio) Para instalar verdaccio ejecuta los siguientes comandos en una terminal: ```bash= npm install -g verdaccio npm set registry https://localhost:3873 ``` Si el entorno utilizado para la instalacion es Windows, asegurate de tener todos los permisos para la carpeta: *C:\user\\{username}\Appdata\roaming\npm*. Si la instalacion falla, intenta - Borrar el archivo *C:\Users{username}\AppData\Roaming\npm\verdaccio.ps1* - Limpiar la cache de npm ejecutando en la misma terminal `npm cache clean` - Y reintentar el proceso de instalacion ### Configure verdaccio Actualiza las configuraciones de verdaccio para incluir el registry de Swagup: - Editar la configuración de verdaccio: -- **Unix**: *~/.config/verdaccio/config.yaml*)' -- **Windows**: *C:\Users*\\*{username}\AppData\Roaming\verdaccio\config.yaml* - En este archivo, reemplace: ```yaml= ... uplinks: npmjs: url: https://registry.npmjs.org/ packages: '@*/*': # scoped packages access: $all publish: $authenticated proxy: npmjs ... ``` por ```yaml= ... uplinks: npmjs: url: https://registry.npmjs.org/ swagup: url: http://ec2-18-208-60-37.compute-1.amazonaws.com:4873/ packages: '@swagup/*': access: $all publish: $authenticated proxy: swagup '@*/*': # scoped packages access: $all publish: $authenticated proxy: npmjs ... ``` Para correr verdaccio ejecutar en una terminal: ```bash= verdaccio ``` ### Github con SSH El acceso a Github con HTTPS obliga a reescribir tu username/password en cada acceso. Ahórrate tiempo usando Github con SSH. Las instrucciones se proveen [aquí](https://help.github.com/en/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) Más sobre Github con SSH: - https://help.github.com/en/articles/changing-a-remotes-url - https://help.github.com/en/articles/testing-your-ssh-connection ### Clonar el proyecto Después de configurar tu SSH key, clona el proyecto ejecutando en una terminal: ```bash= git clone git@github.com:swagup-com/swagupHR.git ``` ### Instalar dependencias del proyecto Para instalar las dependencias del proyecto mantén **verdaccio** ejecutándose en una terminal separada y ejecuta: ```bash= npm i ``` ### Variables de entorno locales Es necesario configurar el entorno local para incluir algunos endpoints necesarios y para ejecutar el proyecto en tu computadora. Crea un archivo *.env.development.local* en la raíz del proyecto con el siguiente contenido ```env= REACT_APP_API_ENDPOINT=https://api-staging.swagup.com/api/v1 REACT_APP_API_FORM_ENDPOINT=https://api-staging.swagup.com/form-api/v1 REACT_APP_API_PARTNERSHIPS_ENDPOINT=https://api-staging.swagup.com/partnerships-api/v1 ``` ## Guía de formatos de Git Revisa la [guía](https://github.com/swagup-com/GitFormatGuide) de formatos de Git de *Swagup* ## Servicios Necesitas solicitar acceso a varios servicios: * 1Password * Slack * Jira * Postman * Zeplin * Figma Debes solicitar el acceso a estos en la compañia También solicitar la creación de una cuenta para https://dashboard-staging.swagup.com ## Ejecutar Next Para ejecutar el proyecto de Next primero crea una carpeta llamada *.devcerts* dentro de la carpeta *express_server*. Debes instalar openssl si no lo has hecho. Abrir una terminal en la carpeta *.devcerts* y ejecutar: ```bash= openssl req -nodes -new -x509 -keyout server.key -out server.cert ``` Los usuarios de windows pueden no tener presente el comando **openssl** para ejecutar la instruccion anterior, para instalarlo pueden seguir la siguiente [guia](https://tecadmin.net/install-openssl-on-windows/). Para hacer build: ```bash= npm run build:next ``` Para ejecutar el proyecto: ```bash= npm run start:next ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.