create-x-app

Create a development environment for your super-x app.

Usage

Just execute one of the following command to get a development environment where my-app should be replaced with the name of your app:

npm init x-app my-app
# or
npx create-x-app my-app

After all dependencies are installed, you will be able to start your development. (See the Workflow section.)

In addition, you can also pass some arguments to it:

create-x-app <name> [options]

    <name>             Your app name

    -h, --help         Show help info

    -d, --dir  <dir>   The directory to create
                       Default: the app name

    -v, --ver  <ver>   The version of `super-x` to use
                       Default: the latest

    -p, --port <port>  The local port to use
                       Default: 8080

Please note that if you omit the super-x version to use, the latest version will be fetched and adopted. If you want to change the version after initialization, please:

1. Execute npm i -D super-x@<version> to update the development dependency where <version> should be replaced with the version you want.
2. Open /dist/public/index.html and modify the lib version to load. (/test/index.html loads the lib from the development dependency, so don't worry about it.)

Workflow

This package initializes a typical development workflow for super-x which is explained below.

Folder Structure

my-app/
+-- node_modules/       Dependency folder
+-- dist/               Files for distribution
| +-- public/           Public files
| | +-- index.css       Page styles for both production and development
| | +-- index.html      The index page for production
| | `-- index.js        Bundled script file (generated by building script)
| `-- server.js         Production server
+-- src/                Source code (some initial code is provided)
| +-- common.js         Common utils
| `-- index.js          The entry point of your app
+-- test/               Test folder
| +-- index.html        The index page for development
| `-- server.js         Development server
+-- package.json        Package declaration file
+-- package-lock.json   Dependency lock file
`-- rollup.config.js    Rollup config file

Scripts

You can run any of the scripts by executing npm run <script> in the root of your app directory where <script> is the script name.

| script name | description | |:-----------:|:-------------------------------------| | start | Launch the production server. | | test | Launch the development server. | | build | Bundle the scripts for distribution. |

Development

Generally speaking, you just need to write your code in src folder and use the development scripts listed above to test and build your app.

When you are developing your app, it is recommended to execute npm test to start the development server and test your app in your browser. In the page for development, scripts are directly loaded from source files so that you can access your result immediately after your code changes.

When you want to get the production version of your app, execute npm run build to bundle the scripts into /dist/public/index.js, which is a bundled and optimized version, and your app for production will be ready in /dist/public. Then, execute npm start to start the production server which serves /dist/public so that you can see the production result of your app in your browser.

Please note that only script files should be placed in the src folder and all other resource files are supposed be put in /dist/public and referenced relative to that folder. For instance, the page style file, /dist/public/index.css, is referenced in index pages as ./index.css. Moreover, although the scripts are loaded as modules in the development server, you have to use the global variable X to access the APIs instead of importing them from the super-x module and you can refer to the initial code given to get an example.

Links

• Repository of super-x
• Contributing Guide
• Changelog
• License (MIT)