Applicacion para acuñar e interactuar con XOC, un peso mexicano decentralizado. Hecho posible gracias a un esfuerzo colaborativo de La DAO.

• Getting started
  • Installation
  • Starting the development server
  • Building for production
  • Running in production
• Usage
  • Global stylesheets
  • Single page applications
  • Browsers list
  • Babel customization
  • Source maps in production
  • Import path aliases

Install NodeJS:

• To install Node.js on your computer, go to the Node.js website (https://nodejs.org/) and download the latest stable version of Node.js. Make sure to select the version that is compatible with your operating system (e.g. Windows, MacOS, Linux).

Clone this repository:

git clone https://github.com/La-DAO/xocolatl-frontend

Install dependencies:

npm install

Run the dev script to start a live development server with hot module replacement. Then check the output for a link to the app, which is usually http://localhost:8080/:

npm run dev

Run the build script to bundle the app for production. The bundle will be created at /public/build/ and the public directory will contain all files you need to host the app:

npm run build

💡 Tip: You can quickly test the production build by running npm start locally.

First upload the following files and folders to your target server:

• package.json
• package-lock.json
• public

Then install dependencies:

npm install --production

Finally run the start command to launch the included web server:

npm start

Add one or more global stylesheets to the bundle by editing the stylesheets variable at the top of webpack.config.ts:

const stylesheets = [
    './src/styles/index.scss'
];

You can specify css, scss, and sass files here, and they will be compiled and minified as necessary. These styles will be added to the beginning of the bundle in the order specified. Svelte's styles will always appear last.

For single page applications that use history routing instead of hash routing, edit the package.json file to serve the index.html file when a requested file is not found:

• Add the --history-api-fallback flag to the "dev" command
• Add the --single flag to the "start" command.

"scripts": {
    "dev": "webpack serve --history-api-fallback",
    "start": "serve public --listen 8080 --single",
}

The bundle will be compiled to run on the browsers specified in package.json:

"browserslist": [
    "defaults"
]

The default value is recommended. If you wish to customize this, please refer to the list of example browserslist queries.

💡 Note: This template includes core-js and regenerator-runtime which means your source code will be transpiled and polyfilled to run on old browsers automatically.

Production builds are compiled with Babel automatically. If you wish to disable it, edit the webpack.config.ts file:

const useBabel = false;

Babel is disabled during development in order to improve build speeds. Please enable it manually if you need:

const useBabelInDevelopment = true;

Source maps are generated automatically during development. They are not included in production builds by default. If you wish to change this behavior, edit the webpack.config.ts file:

const sourceMapsInProduction = true;

Define import path aliases from the tsconfig.json file. For example:

"paths": {
    "@stores/*": ["src/stores/*"]
}

You can then import files under these aliases and Webpack will resolve them. Your code editor should also use them for automatic imports:

import { users } from '@stores/users'; // src/stores/users.ts

The root directory is configured as a base path for imports. This means you can also import modules with an absolute path from anywhere in the project instead of using a large number of .. to traverse directories.

import { users } from 'src/stores/users';