I have an app (built with laravel) which i deployed it and working very well, but i have a question, when i deploy it the server i made these process :
1- minify css and js files and comine them in a single file
2- changing some configuration (database,hostname,mail sever ,etc ...)
3- Finally i upload my files to the server.
how can i return back to my local config and unminify my js and css files without doing it manually ?
is there a better way to make it automated ? i know that the first step can be done by gulp or any javascript task runner by a single command and the second one is not a big deal ,but i just want to know if there an automated way?
Why don't you just have a .env config file out of you version control and compress your CSS/JS using Laravel Mix as a part of your deploy process?
To make it clear:
Keep your .env file in .gitignore. Thus you have to setup your environment settings only once (database, hostname, etc).
Use npm run prod to minify your CSS/JS: https://laravel.com/docs/5.4/mix
Related
I'm coming from the SPA / React world and am working on my first Nuxtjs SSR app.
When I run an npm run build I'm expecting artifacts to be created which can be copied over to my production environment that are then run using node on the server. When I do an npm run build, I get nothing in a dist folder but in ./nuxt/dist there are two folders, server and client.
Completely lost on how to proceed from there. All the online help seems to be for non production builds with the entire development folder present to run nuxt start.
How do I do a production deployment and run it using node on a server
There are several way to publish nuxt:
So, for an SPA deployment, you must do the following:
Change mode in nuxt.config.js to spa.
Run npm run build.
Deploy the created dist/ folder to your static hosting like Surge, GitHub Pages or nginx.
but I think you use universal mode (SSR) so in this mode its better to install npm or yarn in server and run this command in your production server
nuxt build
nuxt start
So if you want to copy dist folder change mode of project to SPA in nuxt.config.js
For more information read this article
How do I deploy an SSR NuxtJs app to a host
There is the same question with my answer. There you will find necessary configs, so I do not want to copy the answer here, because it is better to keep everything in one place because of possible updates.
I have a Laravel project in my local machine that is currently in development, due to reasons, the application is showcase to people using an Nginx server, the problem is this, in the local machine I host the project in a root directory (localhost:8000/), but in the Nginx I host it in a folder (e.g. 10.x.x.x/webapp/), this breaks a lot of stuff and I need to constantly change back and fort the reference to the assets and scripts I have, example:
Font awesome fail to load because is looking for the js & css directories and not the webapp/js & webapp/css directories
In a vue component holding a picture the picture won't load because is looking for /img/picture.jpg instead of /webapp/img/picture.jpg
The only way I manage to solve this is, in the case of Font awesome, is to add the mix.setResourceRoot('/webapp') parameter on the webpack.mix.js file, and in the case of the assets to add /webapp at the beggining, but doing that breaks everything on localhost, since now everything is pointing to a folder that doesn't exist in my machine.
What is a possible solution to have both running without constant reference changes? And what other possible problems could emerge?
I'm testing process of deploying app with vue components on shared server. I have access to ssh. Npm is also installed. I check it with "node -v" command. The problem is that vue compoennts are not displaying. I tried to write "npm run production" but I receive an error 126. What should I do to display vue components? I know the voices that shared hosting is not the best choice but I'm just testing. I know that it's possible to turn on vue components on this hosting. I did it long time ago but I forgot how. My process of deployment had 3 steps:
1. Copy files (wihout public_html) from local disc to shared server w
2. Copy public_html do public_html on shared server
3. Changing paths in index.php inside public_html
App is almost working. The problem is with vue components. Please help.
You don't need NodeJs in production. You just need to build it (CSS & JS) on your machine, then upload it. Run npm run production in your local machine, then the public/css/app.css and public/js/app.js will be available (depends on your configuration). Then, just upload these files, done.
When I finished my task, I didn't commit webpack packaged assets such like CSS, JS, only commit /resources/assets/* to git, and pull the commits on the production machine, during it packing js and CSS it needs a little time to minify CSS and js.
At this time many user request the page, and some page include CSS such like <link rel="stylesheet" href="{{ mix('/css/xxxxx.css') }}"/>
will cause an exception in the log like Unable to locate Mix file: /css/xxxxx.css
How can I avoid this happened?
Running composer install or npm run prod on a production server which is not in maintenance mode is not adviced. If you need a zero-downtime deployment, take a look at Envoyer. It's made by the same person who created Laravel.
On a side note, running npm run prod on a production server is not adviced, even if you use envoyer. There is no point in having all your node files on the server and you'll be wasting unnecessary server processing power by running node commnds. I'd recommend running node commands on your local machine and pushing the final compiled files that webpack spits out to the server. Anyways, you need to check if the production version of your CSS and JS work as intended on our local machine before deploying it to the server.
In AWS Elastic Beanstalk, there is a wizard flow for deploying node.js apps. When I get to the step for "upload your own" application source, it describes in generic terms their 3 requirements: zip file, less that 500MG, no parent folder.
But they stop there. No specifics.
I dropped out to bash and ran...
ng build --prod
...and now have a dist folder. So... what do I include in my zip file and at what folder level? I have tried just /dist, and also /myapp/dist which included all the other loose files in /myapp but no other sub folders such as /src. I have looked all over the web, but don't see what should be a fairly simple tutorial on zipping up an Application Source Bundle for AWS EC2.
What should be included in the zip file for upload?
The cardinal sin in my question above was attempting to run my Angular 5 app in AWS by using their choice for node.js as my server platform. Here is what I learned (with some help from folks like Albert Haff: Angular 5 uses Node (ng serve) to simulate a webserver while you code. However, even though there is a supported flag for --prod, it's not to be used in production! It's really easy (and tempting) to select node.js as the environment when deploying your Angular 5 app via Beanstalk -- but don't do it!
from within your Angular 5 project folder, run ng build --prod ( and consider adding --aot)
if you can, from within the new /dist folder that the build just created (or updated), optionally run compression like for i in dist/*; do brotli $i; done
from within the /dist folder, zip up ALL the contents including subfolders.
go to beanstalk, and as you create a webserver environment, select Tomcat (or any other plain old webserver, but DON'T pick node.js even though it's on the list!).
on Application Code, select to Upload Your Own, and browse to the .zip file you created in step 3 above.
click Create Environment and in a few minutes your Angular 5 app will be serving up on the internet.
Now, from here you will likely need to connect up your domain name. Use Route 53 for that.