I have a vuejs app using webpack, which can also be package into electron app.
The structure of the app is like the following:
https://github.com/kahwooi/vuetron
It can be run on webpack-dev-server.
My question is can the app run on Azure or any web server?
Yes, generally speaking, Azure Web Apps as a web service platform provides production environment for web applications. So you can try the following steps for the simplest requirement to run vuetron on Azure.
Install the vuetron on your local environment:
# Install electron and webpack-dev-server
npm install -g electron webpack-dev-server
# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init kahwooi/vuetron my-project
# Install dependencies and run your app in development mode
cd my-project
npm install
# View app using browser at http://localhost:8080, automatically updates the browser on changes.
# Run as electron desktop app
webpack
Remove the /dist in .gitignore file in your directory.
Create a Web App with local git deployment via Azure-Cli:
azure login
azure config mode asm
azure site create --git {your_site_name}
Deploy your application to Azure via Git:
git add .
git commit -m "{your commit message}"
git push azure master
Finally, launch your live Azure app in the browser:
azure site browse
Any further concern, please feel free to let me know.
Related
I'm trying to deploy a Node.js (Remix) application to an Azure App Service instance. After installing the npm packages, the post-install script must run for the Remix app to eventually work. The post-install script is npx remix setup node.
Unfortunately, the deployment fails because of the following reason:
npm ERR! could not determine executable to run
I get the same error when trying to use other npx commands, as npx prisma generate. I tried npm exec as well instead of npx.
Thank you in advance!
In startup command try using npx serve -s build/
Also, under your app service Settings blade check all the general settings.
Make sure that your web.config was published along with your app.
I built a laravel with inertiajs App, Now I'm going to deploy my app to some host.
I tried Siteground to deploy it but it doesn't support NPM!
Now I'm trying to do it with cpannel, Here is my file structure:
And I already connect SSH terminal. there is no issue with laravel installation, but when I do npm install I'm getting -bash: npm: command not found
Can you help me with some example please!
In production you don't need to install node modules if you have a production version of your (React app)
i usually use Reactjs in frontend so the process is
yarn build
take the build version of your app and add it to the root of your server
for Laravel
git clone ******
cp .env.example .env
edit the .env data to match your production data
run composer install
run php artisan key:generate
php artisan migrate
point your server to the public folder with symbolic link for example
your app should now be live.
So I was trying to deploy my react app to an Azure Web App.
I used a Github Action to build and install the App and then ZIP Deploy it to Azure.
The Problem is that once I open up the WebApp Page it shows me an Application Error (react-scripts could not be found).
I found out that once I copy the react-scripts.cmd / ps1 (from local /node_modules/.bin) to the node_modules/.bin folder of the webapp "https://{WEBAPP-NAME}.scm.azurewebsites.net" it works.
Unfortunately I would have to do that after every build.
How can I come up with a solution to this error?
What I already tried:
Update node and npm
Remove package-lock
Thanks in advance
Max
My package.json:
It looks like this issue: npm package.json scripts not being called
Try running npm run-script if you want to execute a script that is not executed by a built-in npm command.
So I found out, that react-scripts is only working in dev environments. But Azure uses a production env. Therefore the github action not only has to install the prod node_modules (npm install) but also the dev modules (npm install --only=dev).
Reference:
https://github.com/mars/create-react-app-buildpack/issues/32#issuecomment-276081892
I'm a little uncertain about some Angular 5 aspects. I've developed an app and don't know how to run it on production.
Currently I run my app using ng serve in NodeJS , but is it same in a production environment ?
thanks!
ng serve
ng serve is for development purpose. Check docs.
When using ng serve the compiled output is served from memory, not from disk.
This means that the application being served is not located on disk in the dist folder.
ng build
ng build --prod is for production purpose. Check docs.
ng build compiles the application into an output directory.
The build artifacts will be stored in the dist/ directory, inside the root directory of your angular app.
Jus copy the dist folder to any server like IIS or Node Express and your angular app is up and running.
To deploy you app using IIS check this and using Node Express check this.
Generally, I do not use Angular CLI's built in web server for production deployments.
With Angular CLI, you can create a production build using this command
ng build –prod
That will create a dist folder, which you can upload to any web server of your choosing to deploy an application.
First and foremost, you should build your app for production using
ng build --prod
You'll find a dist folder in your project folder. This is the Production-ready version of your app.
Now you'd require a server to deploy your app. Install this - https://www.npmjs.com/package/http-server and run using http-server dist/myProject (replace myProject with your project name)
ng build generate production files in outDir folder.
To know where it is, go to .angular-cli.json file and see apps > outDir property. For example:
"apps": [
{
"root": "src",
"outDir": "../../webapp/recorder",
"assets": [
"assets",
"favicon.ico"
],
...
These files are only html, css and javascript and can be used on any web server
Follow this instruction by using Angular CLI:
1- Build your project (for production mode)
ng build --prod
2- If you want to see your project in production mode before deploy it on the real server you can use lite-server to serve your project in a local machine.
First install lite-server
npm i lite-server --save-dev
And then run your project on local server
lite-server --baseDir="dist/your-project-name"
I want to upload my React project to an external server. I already have a project and I use node server locally to run it using webpack.
I don't have any deployment experience prior to this. So any insights regarding deployment would be helpful.
You can follow these steps:
SSH to the server using server credentials.
sudo su
git clone repository address [Only if the repository hasn't been cloned yet]
cd projectFolder
git checkout <branchYouWantToDeploy>
git pull origin <branchYouWantToDeploy>
npm install
npm run build:production
apachectl graceful [only for apache servers]
service nginx reload [only for nginx servers]
exit
If git and npm are not installed in the server, you can follow these links respectively:
GIT
https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
NODE
https://nodejs.org/en/download/package-manager/
npm is installed with Node.js npm is distributed with Node.js- which
means that when you download Node.js, you automatically get npm
installed on your computer.
You may/may not need to follow all the steps depending upon the type and complexity of your project and server. However those should be good enough to start. You can always add more details regarding your project and deployment server in your question.
Here are some medium blog post that might you to go in-depth:
Understanding React deployment
Deploy react-webpack to Digital Ocean with Nginx and Github