A full-featured Framework7 + Vue + Webpack2 setup with hot-reload.
Based on Framework7 - Vue - Webpack Cordova Template.
# install Node.js and NPM
sudo apt-get update
curl -sL https://deb.nodesource.com/setup_7.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt-get install nodejs
sudo apt-get install build-essential# install Cordova
sudo npm install -g cordova
# install packages to generate Icons and Splashscreen for the app
sudo apt-get install imagemagick
sudo npm install splashicon-generator -gTo install Java please refer to the following guide.
Go to Android Studio download page, scroll down to the bottom of the page and copy the link to download the sdk-tools for Linux:
wget https://dl.google.com/android/repository/sdk-tools-linux-3859397.zipUnzip the package and move it to "/usr/local/android-sdk"
unzip tools_r25.2.3-linux.zip -d /usr/local/
mv /usr/local/tools /usr/local/android-sdk-linuxInstall the necessary Android SDK and packages
# List all the available packages
/usr/local/android-sdk-linux/tools/bin/sdkmanager --list
# Install the tools and platform-tools packages
/usr/local/android-sdk-linux/tools/bin/sdkmanager "tools" "platform-tools"
# Install the SDK (the version that you want)
/usr/local/android-sdk-linux/tools/bin/sdkmanager "build-tools;25.0.3" "platforms;android-25" "sources;android-25"
# Update the packages installed
/usr/local/android-sdk-linux/tools/bin/sdkmanager --updateSet enviroment vars
# Edit the file
vim /home/<user>/.bashrc
# And add the following lines at the end
export ANDROID_HOME="/usr/local/android-sdk-linux"
export ANDROID_TOOLS="/usr/local/android-sdk-linux/tools"
export ANDROID_PLATFORM_TOOLS="/usr/local/android-sdk-linux/platform-tools"
export PATH="$PATH:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLS"
# Refresh
source /home/<user>/.bashrcOnce you have all the pre-requisites installed, clone this repo and have some fun:
# Install dependencies
npm install
# Add cordova platforms
cordova platform add browser android
# Serve project with browser hot reload
# Default host: localhost IP
# Defult port: 8081
HOST="myhost.com" PORT="10001" npm run hot-dev
# The project will be served in HOST:8000, from there, you will be redirected to the default HOST:PORT url
# To change also the cordova browser port (8000), you can change it in "platforms/browser/cordova/run" file
# You also can serve the project with simultaneous hot reload at your android/ios device and the browser
HOST="myhost.com" PORT="10001" npm run hot-dev-ios
HOST="myhost.com" PORT="10001" npm run hot-dev-android
# These commands of course will run the emulator for the selected platformWhen you run the app using the browser platform, if you don't want the browser to auto-open, change the next line in the file "platforms/browser/cordova/run":
//return cordovaServe.launchBrowser({target: args.target, url: projectUrl});
return cordovaServe;
src/static- folder with static assets (images)src/assets/css- put custom app CSS styles here. Don't forget to import them inmain.jssrc/assets/sass- put custom app SASS styles here. Don't forget to import them inmain.jssrc/assets/vue/pages- app.vuepagessrc/main.js- main app file where you include/import all required libs and init appsrc/routes.js- app routessrc/main.vue- main app structure/componentsrc/index.html- index file
# In the folder 'src/static' should exist two files: icon.png && splash.png
npm run generate-icon-splash
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent