Create a development environment for your
super-x
app.
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:
- Execute
npm i -D super-x@<version>
to update the development dependency where<version>
should be replaced with the version you want. - 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.)
This package initializes a typical development workflow for super-x
which is explained below.
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
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. |
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.