nodejs version >= 10.x and npm version >= 6.x
Edit .env file in order to set backend url into ui app, constant value should be assigned to VUE_APP_API_URL:
#.env file
VUE_APP_API_URL=http://URL_FOR_BACKEND:PORT_FOR_BACKEND
VUE_APP_GOOGLE_KEY=<HERE_ADD_GOOGLE_PLAY_TOKEN>For API KEY to use google maps, please go to https://developers.google.com/maps/documentation/javascript/get-api-key to review how to generate the API key to enable google maps.
inside client project run next command:
npm install
npm run build
This command generate the dist folder with all minified files.
You can use dist file to run client on any server (nginx, apache, nodejs...)
Here we have the config for nginx configuration.
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
Note You can run files in dist folder on any backend server (Django, Nodejs) as a static folder.
If you need I added docker configuration to deploy easily container with UI site.
run with docker:
docker build -t caravel-ui
docker run -d -p 8080:80 caravel-ui
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent