I'm working on a vue/laravel project and can't use one url path for both the dev environment (npm run hot) and production environment (php artisan serve).
This CSS example works only for php artisan:
background: url("../images/image.png")
while this only works for npm run hot:
background: url("/public/images/image.png")
Is there a method that works in both?
As far as I know you should refer to from src. So moving the image.png to /src/images/image.png it would be something like background: url("#/images/image.png"), as # refers to src.
EDIT: Approach with laravel and vue-cli
If you need to set up different path´s for your enviroments, vue-cli could be your choice. This gives you the possibility to create a vue.config.js and set up a publicPath for your enviroments.
Further Information: Integrate Laravel with a Vue CLI app
I've ended up just using php artisan serve with hot reload instead of using npm run hot. Now I have only one dev environment. You can see here how to set it up.
Related
I'm using PhpStorm's Command Line Tool Support for using Laravel's artisan as a "Tool based on Symfony console" as shown below:
Problem is I want to share this across all my projects (global scope). But if I hard code the path to /home/user/project/artisan in Tool path then it runs the that project's directory (not my currently open one). If I just put artisan it doesn't run.
Is there a template variable like $ProjectDir$ or something I can add in the Tool path?
I want to develop my static web application with React. I have just done with the Tic-tac-toe getting started tutorial. Are there anyways I can "compile" (or whatever the term is) ReactJS straight into my HTML file? So, far to run that ReactJS application I need to run it with a server from Yarn.
I prefer to not use CDN because I want to update and manage the dependencies.
Let say, for my starting point, I want to have that Tic-tac-toe game from official React getting started tutorial to be served with just one HTML file (CSS and JS in that one HTML file). I want to see if this is possible or not, so I don't care about the best practice for this question.
You should have a look at Gatsby JS
It's a static site generator for React. Probably that's what you're looking for.
Run npm run build or yarn build and see the output in the build folder. It generates static HTML, CSS and Javascript.
Sounds like you are using Yarn with create-react-app. If so you are running:
yarn start
Now run:
yarn build
See more info here: https://github.com/facebookincubator/create-react-app
The static web application will be built to a build folder. You will find all of the static assets there like JS, CSS and HTML.
I have tested. yarn build works only with a server. Even python3 -m http.server works. So, no! ReactJS downloaded from non-Bower package manager will not work without server out-of-the-box.
I'm trying to enable vue-devtools in Google Chrome. But I cannot enable it. I'm using vue.js inside the Laravel application.
My server runs using php artisan serve command.
I was seeing the error message in this question's title and this solution worked for me:
Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).
Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.
Below is what the changes looked like in my project:
If the page uses a production/minified build of Vue.js, devtools
inspection is disabled by default so the Vue pane won't show up.
To make it work for pages opened via file:// protocol, you need to
check "Allow access to file URLs" for this extension in Chrome's
extension management panel.
I had to restart the chrome, and it worked :-)
If your using CDN; make sure your not using a production (minified) build of the library.
Use: https://unpkg.com/vue#2.4.4/dist/vue.js
Instead of: https://unpkg.com/vue#2.4.4/dist/vue.min.js
You might need to do Ctrl+Alt+I for it to show up the first time. (Source)
Updated Aug 2022
So apparently as #kissu said, the answer below causes the released code to be an unoptimized one. This might be different than what you want if you want to check production code while being able to check Vue Dev Tools.
Just be aware of it. Unless you don't mind checking the released code in an unoptimized bundle, then the following script is fine. If you don't like the Vue.config.devtools value being static, it might be time to consider env variables or something similar.
Here's how to setup Environtment Variables in Vue
Alternative answer for Vue CLI 3.x
Besides what #NathanWailes has said, this is an alternative which allows the Dev Tools to be available through scripts instead of writing it in your main Vue entry (which is usually main.js or index.js).
You can do this by simply adding this script to package.json
scripts: {
"start:dev": "vue-cli-service build --mode=development"
}
Explanation
This was because Vue.config.devtools are set to false by default in production mode as said by this GitHub Issue. But this has a work around, simply by using --mode=development flag provided in the documentation.
Then you can run using npm run start:dev and check the file in your dist/ folder! ;)
You may use the dev version of vue.js. For example get it here: https://unpkg.com/vue#2.3.2
When using Laravel just make sure you run the proper webpack for your environment for development . Running
npm run watch
should build Vue with debug mode on. Using
npm run production
minifies Vue for production. This will save you having to remember to toggle the debug mode when building for production.
For me Installing latest Vue dev tools - link and enabling 'Allow access to file URLs' in extension settings resolved the issue.
make sure you're running a non-production build of Vue.js. https://github.com/vuejs/vue-devtools/issues/62
Just add into vue.config.js:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
delete package-lock.json, node_modules, run npm i and VueJS Devtool will be working
you could try to set environment variable NODE_ENV to 'development'
(e.g. set NODE_ENV=development on Windows or export NODE_ENV="development" under Linux)
before launching Vue dev server.
In my case for Laravel 9 fresh installation, I forgot to run sail npm run dev.
If you're using Vite you can configure your environment directory via shared options. If you change that and have NODE_ENV set to production you'll receive this message when trying to inspect your app.
I've created a new jekyll project precisely following the simple command sequence at https://jekyllrb.com/. However it seems like the server is not looking for the right main.css:
GET http://example.com/css/main.css 404 (Not Found)
This error in the browser console seems to imply an irrelevant domain for a local project, so I wonder whether those instructions just mentioned are not what one should do for bootstrapping and running/testing a jekyll project on your local server. In that case, what is the right procedure for working locally? and is there an automated command for setting a different host name for deploying to a real server?
I am using a fresh install of jekyll 3.2.1.
Thanks!
Dirty temporary patch (because of this issue).
In _config.yml, set url: http://matanster.github.io/bloglike or wathever is your production url.
Create a config_dev.yml and add url: http://127.0.0.1
Locally, you can serve with :
bundle exec jekyll serve --config _config.yml,_config_dev.yml
I started a Django 1.7 OpenShift instance. When I have python print all of the paths from sys.path I do not see OPENSHIFT_REPO_DIR (/var/lib/openshift/xxxxx/app-root/runtime/repo).
When I use https://github.com/jfmatth/openshift-django17 to create a project I do see OPENSHIFT_REPO_DIR in the path.
Looking through the example app above I don't see anywhere that this is specifically added to the path. What am I missing?
To clarify:
I have to add the following to my wsgi.py:
import os
import sys
ON_PASS = 'OPENSHIFT_REPO_DIR' in os.environ
if ON_PASS:
x = os.path.abspath(os.path.join(os.environ['OPENSHIFT_REPO_DIR'], 'mysite'))
sys.path.insert(1, x)
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "mysite.settings")
OPENSHIFT_REPO_DIR is not in my path as I would expect. When I used the example git above, I did not have to add anything to the path.
A little while back I had issues with some of the pre-configured OpenShift environment variables not appearing until I restarted my application.
For what its worth, I started up a brand new Django gear, printed the environment variables to the application log, and verified that I do see OPENSHIFT_REPO_DIR (and all other env vars) properly.
This issue appears to be caused by trying to use the standard file structure layout that django produces when you use startproject. Openshift appears to need a flatter file structure. As soon as I moved wsgi up to a sibling of mysite it resolved the issue.