Create Web Lab

Create first web lab with no build configuration.

Create Web Lab works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.

Documentation

Quick review

To create a new lab, you may choose one of the following methods:

npx

npx create-web-lab my-lab

(npx is a package runner tool that comes with npm 5.2+ and higher)

npm

npm i -g create-web-lab
create-web-lab my-lab

(But I wouldn't recommend this method, keep calm and use npx)

It will create a directory called my-lab inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── index.html
├── assets
│   ├── favicon.ico
│   └── logo.png
├── server
│   └── server.php
├── js
│   └── script.js
└── style
    └── style.(css|scss)

No configuration or complicated folder structures, only the files you need to build your app.

Templates

If you run create-web-lab -h in terminal, you will recognise, that there several templates, on which you can build your lab:

• Simple template (no keys)
• Webpack template (key: -w)
• Typescript template based on webpack (key: -t)

Also, during making your app you will be asked questions:

• Do you want to add Jquery to template
• What styles do you want to use (now only CSS and SCSS)

Simple template based on CSS

To make it, run (also choose CSS as default style):

npx create-web-lab my-lab

Project structure

my-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── index.html
├── assets
│   ├── favicon.ico
│   └── logo.png
├── server
│   └── server.php
├── js
│   └── script.js
└── style
    └── style.css

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Your lab will automatically open in your default browser.

Development

Learn more here

Simple template based on SCSS

To make it, run (also choose SCSS as default style):

npx create-web-lab my-lab

Project structure

my-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── index.html
├── assets
│   ├── favicon.ico
│   └── logo.png
├── server
│   └── server.php
├── js
│   └── script.js
└── style
    └── style.scss

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Your lab will automatically open in your default browser.

npm run sass

Compile default sass file to css.

Development

Learn more here

Template based on Webpack

In that template you won't have some troubles with production and development build, like in the simple template. Development doesn't change from style choose.

To make it, run:

npx create-web-lab my-lab -w

Project structure

my-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── webpack.congig.js
├── src
│   ├── styles
│   │   └── style.css || style.scss
│   └── index.js
├── server
│   └── server.php
└── public
    ├── index.html
    ├── logo.png
    └── favicon.ico

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Your lab will automatically open in your default browser.

npm run dev

Build your lab in development mode (files will be readable and won't be hashed). Check your build in root/build/

npm run build

Build your lab in production mode (files won't be readable and will be hashed). Check your build in root/build/

Development

Learn more here

Typescript template based on Webpack

In that template you won't have some troubles with production and development build, like in the simple template. Development doesn't change from style choose.

To make it, run:

npx create-web-lab my-lab -t

Project structure

my-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── webpack.congig.js
├── src
│   ├── styles
│   │   └── style.css || style.scss
│   └── index.ts
├── server
│   └── server.php
└── public
    ├── index.html
    ├── logo.png
    └── favicon.ico

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Your lab will automatically open in your default browser.

npm run dev

Build your lab in development mode (files will be readable and won't be hashed). Check your build in root/build/

npm run build

Build your lab in production mode (files won't be readable and will be hashed). Check your build in root/build/

Development

Learn more here

Pay attention to development

I'll describe you how to develop your lab using PhpStorm.

Only for simple CSS template

If you run app using npm start, notice that php script wouldn't work. That's because live-server, which is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab. When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm local server (go to index.html file and in the right top you will see bar with browsers). Also, you need to configure php in PhpStorm.

Only for simple SCSS template

If you run app using npm start, notice that php script wouldn't work. That's because live-server, which is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab. When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm local server (go to index.html file and in the right top you will see bar with browsers). Also, you need to configure php in PhpStorm. Before checking php scripts you should run npm run sass to compile your SCSS file to CSS.

Only for webpack template

If you run app using npm start, notice that php script wouldn't work. That's because dev-server, which is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab. When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm local server. For checking back, run npm run dev and go to build. Press on index.html file and in the right top you will see bar with browsers. Also, you need to configure php in PhpStorm.

Only for typescript template

If you run app using npm start, notice that php script wouldn't work. That's because dev-server, which is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab. When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm local server. For checking back, run npm run dev and go to build. Press on index.html file and in the right top you will see bar with browsers. Also, you need to configure php in PhpStorm.

License

Create Web Lab is open source software licensed as MIT.